Skip to content

Commit 6e15779

Browse files
authored
Added README.md 📝
1 parent 6b6782b commit 6e15779

File tree

1 file changed

+107
-0
lines changed

1 file changed

+107
-0
lines changed

README.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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&section=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 ![GitHub](https://img.shields.io/github/contributors/MarketingPipeline/File-Loader.js)
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 ![GitHub](https://img.shields.io/github/license/MarketingPipeline/File-Loader.js)
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

Comments
 (0)