I'm using a CSS class on the body to stop transitions running when the document loads. How can I remove it once the Window has loaded with JavaScript (no jQuery)?
HTML:
<body class="preload">
css:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
This would be the jQuery equivalent *except I'm not using jQuery:
$("window").load(function() {
$("body").removeClass("preload");
});
I'm using a CSS class on the body to stop transitions running when the document loads. How can I remove it once the Window has loaded with JavaScript (no jQuery)?
HTML:
<body class="preload">
css:
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
This would be the jQuery equivalent *except I'm not using jQuery:
$("window").load(function() {
$("body").removeClass("preload");
});
2 Answers
Reset to default 5This should do the trick:
window.addEventListener(
'load',
function load()
{
window.removeEventListener('load', load, false);
document.body.classList.remove('preload');
},
false);
Using addEventListener means that it won't interfere with any other event listeners that may be attached by other libs, etc.
The above code will remove the event listener once the event has fired too.
I would have thought the event listener should be on document but apparently that doesn't work.
Something like this should work in all browsers:
window.onload = function () { document.body.className = ""; }
Drew's answer is good, but classList is not supported in older versions of IE as well as window.addEventListener, if that's important.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742320191a4421652.html
评论列表（0条）