Can I load CSS Using the library "load.js"?

I recently learned about load.js , but I can’t find any sign of whether this is possible .. (Note: I can’t find the load.js tag ..)

I have load.js successfully loading all my JS files, so I know this works. Has anyone made money downloading CSS files?

Update: Remyabel Solution works great for downloading physical files, but there seem to be a few features for this process ...

For some reason, the order in which CSS files are loaded and whether they are all made in one load(file1,file2); or stepwise with load(file1).then(file2); , affects how style rules apply to markup. I'm going to set up some test cases on my local machine to try to figure out how and why this happens, but at least the files are currently being downloaded.

Final Note:

Following the solution below, I decided to use head.appendChild(script); instead of head.insertBefore(script, head.firstChild); to add CSS elements to the DOM (still using the original method for JS files).

This does not affect the order in which files are loaded and processed, but it does Load.js insert my CSS links in the same order in which they were listed, and at the end of the header instead of the beginning.

+4
source share
1 answer

Straight from source

  function asyncLoadScript(src) { return function (onload, onerror) { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; 

My suggestion is to modify the script (which does not seem to contain much) to reflect the function, but for the link tag, not the script tag.

to reflect the OP comment

The script is built on top of chain.js, so it can be harder than expected.

If you don’t want something else, I’m sure that what I wrote above is what you need to change so that it looks like this:

  function asyncLoadScript(src) { return function (onload, onerror) { // Get file extension var ext = src.split('.').pop(); if (ext == "js") { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = src; } else if (ext == "css") { var script = document.createElement('link'); script.type = 'text/css'; script.href = src; script.rel = "stylesheet"; } 

Theoretically, this should work. Make another comment if it doesn't work.

+4
source

Source: https://habr.com/ru/post/1479146/


All Articles