Skip to content

Easily dynamically load scripts and style-sheets to HTML pages in parallel order

License

Notifications You must be signed in to change notification settings

MarketingPipeline/File-Loader.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

File-Loader.js

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/File-Loader.js@v1.0.0/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/File-Loader.js@v1.0.0/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 GitHub

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 GitHub

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