9

GitHub - MarketingPipeline/File-Loader.js: Easily load scripts and style-sheets...

 2 years ago
source link: https://github.com/MarketingPipeline/File-Loader.js
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

File-Loader.js

68747470733a2f2f63617073756c652d72656e6465722e76657263656c2e6170702f6170693f747970653d776176696e6726636f6c6f723d353339626635266865696768743d3330302673656374696f6e3d68656164657226746578743d46696c652d4c6f616465722e6a7326666f6e7453697a653d363026666f6e74436f6c6f723d66666666666626616e696d6174696f6e3d66616465496e26666f6e74416c69676e593d333826646573633d456173696c792532306c6f616425323066696c6573253230746f253230746865253230444f4d2532302f25323048544d4c2664657363416c69676e593d36302664657363416c69676e3d3530

The easiest way to load scripts & stylesheets to your HTML page
Show your support!

Example and usage

How to use File Loader:

You can load a script / stylesheet or MULTIPLE scripts & stylesheets like so -

<script type="module">
import {FileLoader} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/file-loader.min.js';
async function example_usage(){
  try{
    let files_to_load = await FileLoader([{url: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js", file_type:"js"}, 
    {url: "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css", file_type:"css"}])
  } catch (error){
    console.log(error) 
  }
}

example_usage()
</script>

How to use File Loader to load files from a template:

You can store your file(s) to load as a json file and fetch them via a URL. Example below -

<script type="module">
import {FileLoader} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/[email protected]/dist/file-loader.min.js';
async function load_files_from_template(){
  try{
    let files_to_load = await FileLoader("https://your_project_URL_here.com/files_to_load.json")
    console.log(files_to_load)
  } catch (error){
    console.log(error) 
  }
}

load_files_from_template()
</script>

Append to head

By default scripts & stylesheets will be appended to the body

You can where the file gets appended to by adding a json key named append_to_head - like so

FileLoader([{url: "your_script_here.js", file_type:"js", append_to_head:true}])

Apply attributes

You can apply attributes like defer, async, type & etc to your scripts & stylesheets like so -

FileLoader([{url: "your_defer_script.js", file_type:"js", attributes: {defer: '', type:"text/javascript", your_custom_attribute:"here"}}])

Contributing

Want to improve this? Create a pull request with detailed changes / improvements! If approved you will be added to the list of contributors of this awesome project!

See also the list of contributors who participate in this project.

License

This project is licensed under the MIT License - see the LICENSE file for details.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK