The easiest way to load scripts & stylesheets to your HTML page
Show your support!
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>
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}])
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"}}])
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.
This project is licensed under the MIT License - see the LICENSE file for details.