Loading css with javascript

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

filamentgroup / loadCSS Public archive

License

filamentgroup/loadCSS

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

⚠️ This project is archived and the repository is no longer maintained.

A pattern for loading CSS asynchronously [c]2020 @scottjehl, @zachleat Filament Group, Inc. Licensed MIT

Why an ansychronous CSS loader?

Referencing CSS stylesheets with link[rel=stylesheet] or @import causes browsers to delay page rendering while a stylesheet loads. When loading stylesheets that are not critical to the initial rendering of a page, this blocking behavior is undesirable. The pattern below allows us to fetch and apply CSS asynchronously. If necessary, this repo also offers a separate (and optional) JavaScript function for loading stylesheets dynamically.

As a primary pattern, we recommend loading asynchronous CSS like this from HTML:

That is probably all you need! But if you want to load a CSS file from a JavaScript function, read on.

Dynamic CSS loading with the loadCSS function

The loadCSS.js file exposes a global loadCSS function that you can call to load CSS files programmatically, if needed. This is handy for cases where you need to dynamically load CSS from script.

loadCSS( "path/to/mystylesheet.css" );

The code above will insert a new CSS stylesheet link after the last stylesheet or script that it finds in the page, and the function will return a reference to that link element, should you want to reference it later in your script. Multiple calls to loadCSS will reference CSS files in the order they are called, but keep in mind that they may finish loading in a different order than they were called.

The loadCSS function has 3 optional arguments.

• before : By default, loadCSS attempts to inject the stylesheet link after all CSS and JS in the page. However, if you desire a more specific location in your document, such as before a particular stylesheet link, you can use the before argument to specify a particular element to use as an insertion point. Your stylesheet will be inserted before the element you specify. For example, here’s how that can be done by simply applying an id attribute to your script .

head> . script id pl-s">loadcss"> // load a CSS file just before the script element containing this code loadCSS( "path/to/mystylesheet.css", document.getElementById("loadcss") ); script> . head>

• media : You can optionally pass a string to the media argument to set the media=»» of the stylesheet — the default value is all .
• attributes : You can also optionally pass an Object of attribute name/attribute value pairs to set on the stylesheet. This can be used to specify Subresource Integrity attributes:

loadCSS( "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", null, null,  "crossorigin": "anonymous", "integrity": "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" > );

Onload event support for link elements is spotty in some browsers, so if you need to add an onload callback, include onloadCSS function on your page and use the onloadCSS function:

var stylesheet = loadCSS( "path/to/mystylesheet.css" ); onloadCSS( stylesheet, function()  console.log( "Stylesheet has loaded." ); >);

The loadCSS patterns attempt to load a css file asynchronously in any JavaScript-capable browser. However, some older browsers such as Internet Explorer 8 and older will block rendering while the stylesheet is loading. This merely means that the stylesheet will load as if you referenced it with an ordinary link element.

Changes in version 3.0 (no more preload polyfill)

As of version 3.0, we no longer support or include a polyfill for a rel=preload markup pattern. This is because we have since determined that the markup pattern described at the top of this readme is simpler and better for performance, while the former preload pattern could sometimes conflict with resource priorities in ways that aren’t helpful for loading CSS in a non-blocking way.

To update, you can change your preload markup to this HTML pattern and delete the JS from your build.

Since this change breaks the API from prior versions, we made it a major version bump. That way, if you are still needing to use the now-deprecated preload pattern, you can keep your code pointing at prior versions that are still on NPM, such as version 2.1.0 https://github.com/filamentgroup/loadCSS/releases/tag/v2.1.0

Contributions and bug fixes

Both are very much appreciated — especially bug fixes. As for contributions, the goals of this project are to keep things very simple and utilitarian, so if we don’t accept a feature addition, it’s not necessarily because it’s a bad idea. It just may not meet the goals of the project. Thanks!

Источник

How to load CSS files using JavaScript?

Sometimes, the task is change the page themes and to use different CSS files on the same page content. In such tasks the need is to fetch a CSS and load it dynamically while selecting a theme. In this case the CSS file has to be accessed, loaded and even selected through a javascript program. Using HTML and javascript code this process of loading the CSS file is demonstrated in this article. This is shown by using two different examples. In the first example, a CSS file is selected on the windows load event. In the second example, two buttons are used to load separate CSS files on button clicks.

Example 1: Loading the CSS file on window.onload( )

Folder and Pages Design Steps −

• Step 1 − Make an html file and start writing the code. Create a CSS file and define the styles for background, p tag and h1 tag.
• Step 2 − Inside the tags in the html file, write the code which will be executed when the page is fully loaded. Use window.onload() for this.
• Step 3 − Inside the tags write the code to fetch the head tag first. Then make a link tag and set its properties.
• Step 4 − Select the css file and add it to the href of the link.
• Step 5 − Now add this created link into the head tag.
• Step 6 − Load the HTML file in a browser and check the result.

Main html file : loadcss1.html

CSS file used: cssfilenew.css

Code For loadcss1.html

      
Example 1
 
To load the CSS file using JS
   

Code For cssfilenew.css

Viewing The Result

For seeing the result open the html file in a browser. The styles will be included in the CSS file that is loaded using Javascript.

Example2: Loading the different CSS files on click of two buttons

Folder and Pages Design Steps −

Step 1 − Make an HTML file and start writing the code. Create two CSS files and define the different styles for the background, p tag, and h1 tag in these.

Step 2 − Inside the tags in the HTML file, make two functions, function1, and function2. Write the code for these functions which will be executed when these functions will be called.

Step 3 − Inside the tags, in both of these functions write the code to fetch the head tag first. Then make a link tag and set its properties.

Step 4 − Select the different CSS files through both functions and add these to the href of the link.

Step 5 − Add this created link to the head tag.

Step 6 − Now create two buttons and call these two functions on different button clicks.

Step 7 − Load the HTML file in a browser. The CSS file is not added initially. It will be added on the button clicks. Click both buttons and check the results.

Main HTML file: loadcss2.html

CSS files used: cssfile.css and cssfilenew.css

Code For loadcss2.html:

      
Example 1
 
To load the CSS file using JS
 Load CSS file One Load CSS file Two   

Code For cssfile.css

Code For cssfilenew.css

Viewing The Result

For seeing the result open the html file in a browser. The styles will be included from the CSS files that are loaded on button clicks.

3In this article, using two different examples, the ways to show how to load the CSS file dynamically using the javascript code are given. First, the method is given where a CSS file is selected when the page is loaded and then the way of using the CSS files on button click is given. For this two buttons are clicked to load different CSS files and change the style of the same page.

Источник