change css link and wait till new css is loaded
html:
<link id="mystylesheet" href="/path/to/css.css" />
code:
$("#mystylesheet").load(function(){
//Your javascript
}).attr("href", "/new/path/to/css.css");
This will replace your current CSS, and execute any code within the .load()
handler after the new CSS file has been fetched.
Dynamically load css stylesheet and wait for it to load
You need to insert a link
node in the head and then attach onload
event to that. In your code link is a String. See sample code below on how to implement what you want.
var link = document.createElement('link');
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.onload = CSSDone;
link.setAttribute("href", 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
document.getElementsByTagName("head")[0].appendChild(link);
Check jsfiddle.
MDN reference on Link element in case you are curious
jQuery Append CSS File and Wait until styles are applied without setInterval?
One solution, if you've got access to the css file you're loading,
is to use the transitionend
event, and to activate a transition, with duration
set to 0.1, from your css.
Like so, you are sure the CSS has been calculated.
style2.css
body{opacity:1;}
index.html
<style>
body{transition : opacity 0.1s linear; opacity:.9};
</style>
<body>
...
<script>
document.body.addEventListener('transitionend', function(){
alert('done');
}, false);
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
Edit:
For the ones that would need a js function (without external files) : https://jsfiddle.net/t0akchuw/
Replacing css file on the fly (and apply the new style to the page)
You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.
The Javascript:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
The HTML:
<html>
<head>
<title>Changing CSS</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
</head>
<body>
<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
</body>
</html>
For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.
jQuery Append CSS File and Wait until Loaded?
Just check when one of the rules of the new CSS has been applied:
$('head').append('<link rel="stylesheet" href="http://cdn.sstatic.net/stackoverflow/all.css?v=d4a5c7ca0d4c" type="text/css" />');
var fakeListener = setInterval(function(){
if($("body").css("text-align")=== "center"){
clearInterval(fakeListener)
// What you want to do after it loads
}
},50)
(That is a working example)
How to load up CSS files using Javascript?
Here's the "old school" way of doing it, which hopefully works across all browsers. In theory, you would use setAttribute
unfortunately IE6 doesn't support it consistently.
var cssId = 'myCss'; // you could encode the css path itself to generate id..
if (!document.getElementById(cssId))
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://website.example/css/stylesheet.css';
link.media = 'all';
head.appendChild(link);
}
This example checks if the CSS was already added so it adds it only once.
Put that code into a JavaScript file, have the end-user simply include the JavaScript, and make sure the CSS path is absolute so it is loaded from your servers.
VanillaJS
Here is an example that uses plain JavaScript to inject a CSS link into the head
element based on the filename portion of the URL:
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();
var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";
document.getElementsByTagName( "head" )[0].appendChild( link );
</script>
Insert the code just before the closing head
tag and the CSS will be loaded before the page is rendered. Using an external JavaScript (.js
) file will cause a Flash of unstyled content (FOUC) to appear.
HTML/CSS Wait until page is loaded
The link you provided is the simplest and best way to do this. No need to look for anything else.
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
Related Topics
How to Make a Div Always Float on the Screen in Top Right Corner
Set Scrolltop and Scrollleft Without JavaScript
Add an Element to the Dom with JavaScript
Using JavaScript to Override or Disable Meta Refresh Tag
JavaScript - Check If String Is Valid CSS Color
Google Chrome Copy CSS Path in Developer Tools
Bootstrap 3: How to Make Head of Dropdown Link Clickable in Navbar
How to Do Anything About "Repaints on Scroll" Warning in Chrome for "Overflow:Scroll" Div
JavaScript Click Event Listener on Multiple Elements and Get Target Id
Center Flex Item in Container, When Surrounded by Other Flex Items
How to Set a JavaScript Onclick Event to a Class with CSS
Prevent Select2 from Flipping the Dropdown Upward
JavaScript Show Element on Click
How to Style a Title? (And with CSS or Js)
Jquery Draggable Event Changing the CSS of Child Element