|
| 1 | +# File-Loader.js |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | + |
| 6 | +<p align="center"> |
| 7 | + <img height="400" src="https://capsule-render.vercel.app/api?type=waving&color=539bf5&height=300§ion=header&text=File-Loader.js&fontSize=60&fontColor=ffffff&animation=fadeIn&fontAlignY=38&desc=Easily%20load%20files%20to%20the%20DOM%20/%20HTML&descAlignY=60&descAlign=50" /> |
| 8 | +</p> |
| 9 | + |
| 10 | + |
| 11 | + |
| 12 | + <p align="center"> |
| 13 | + The easiest way to load scripts / stylesheets to your HTML page |
| 14 | + |
| 15 | + <br> |
| 16 | + <small> <b><i>Show your support!</i> </b></small> |
| 17 | + <br> |
| 18 | + <a href="https://github.com/MarketingPipeline/File-Loader.js"> |
| 19 | + <img title="Star on GitHub" src="https://img.shields.io/github/stars/MarketingPipeline/File-Loader.js.svg?style=social&label=Star"> |
| 20 | + </a> |
| 21 | + <a href="https://github.com/MarketingPipeline/File-Loader.js/fork"> |
| 22 | + <img title="Fork on GitHub" src="https://img.shields.io/github/forks/MarketingPipeline/File-Loader.js.svg?style=social&label=Fork"> |
| 23 | + </a> |
| 24 | + </p> |
| 25 | + |
| 26 | + |
| 27 | + |
| 28 | + |
| 29 | + |
| 30 | +## Example and usage |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | +How to use <b><i>File Loader</b></i>: |
| 35 | + |
| 36 | + You can load a script / stylesheet or <b>MULITPLE</b> scripts & stylesheets like so - |
| 37 | + |
| 38 | +```js |
| 39 | +import {FileLoader} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/File-Loader.js@v1.0.0/dist/file-loader.min.js'; |
| 40 | +async function example_usage(){ |
| 41 | + try{ |
| 42 | + let files_to_load = await FileLoader([{url: "https://cdn.jsdelivr.net/gh/MarketingPipeline/IPTV-Parser.js/dist/iptv-parser.min.js", file_type:"js"}, |
| 43 | + {url: "https://cdn.jsdelivr.net/gh/MarketingPipeline/IPTV-Parser.js/dist/iptv-parser.min.js", file_type:"css"}]) |
| 44 | + console.log(files_to_load) |
| 45 | + } catch (error){ |
| 46 | + console.log(error) |
| 47 | + } |
| 48 | +} |
| 49 | + |
| 50 | +example_usage() |
| 51 | +``` |
| 52 | + |
| 53 | + |
| 54 | + |
| 55 | + |
| 56 | + |
| 57 | + |
| 58 | + |
| 59 | +How to use <b><i>File Loader</b></i> to load files from a <b>template</b>: |
| 60 | + |
| 61 | +You can store your file(s) to load as a <code>json</code> file and fetch them via a URL. Example below - |
| 62 | + |
| 63 | +```js |
| 64 | +import {FileLoader} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/File-Loader.js@v1.0.0/dist/file-loader.min.js'; |
| 65 | +async function load_files_from_template(){ |
| 66 | + try{ |
| 67 | + let files_to_load = await FileLoader("https://your_project_URL_here.com/files_to_load.json") |
| 68 | + console.log(files_to_load) |
| 69 | + } catch (error){ |
| 70 | + console.log(error) |
| 71 | + } |
| 72 | +} |
| 73 | + |
| 74 | +load_files_from_template() |
| 75 | +``` |
| 76 | + |
| 77 | +## Append to head |
| 78 | + |
| 79 | +By <b><i>default</i></b> scripts & stylesheets will be appended to the <b>body</b> |
| 80 | + |
| 81 | +You can where the file gets appended to by adding a json key named <code>append_to_head</code> - like so |
| 82 | + |
| 83 | +```js |
| 84 | +FileLoader([{url: "your_script_here.js", file_type:"js", append_to_head:true}]) |
| 85 | +``` |
| 86 | + |
| 87 | +## Apply attributes |
| 88 | + |
| 89 | +You can apply attributes like <code>defer, async, type & etc</code> to your scripts & stylesheets like so - |
| 90 | + |
| 91 | +```js |
| 92 | +FileLoader([{url: "your_defer_script.js", file_type:"js", attributes: {defer: '', type:"text/javascript", your_custom_attribute:"here"}}]) |
| 93 | +``` |
| 94 | + |
| 95 | +## Contributing  |
| 96 | + |
| 97 | +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! |
| 98 | + |
| 99 | +See also the list of |
| 100 | +[contributors](https://github.com/MarketingPipeline/File-Loader.js/graphs/contributors) who |
| 101 | +participate in this project. |
| 102 | + |
| 103 | +## License  |
| 104 | + |
| 105 | +This project is licensed under the MIT License - see the |
| 106 | +[LICENSE](https://github.com/MarketingPipeline/File-Loader.js/blob/main/LICENSE) file for |
| 107 | +details. |
0 commit comments