CODEWITHSUNDEEP
jqueryinternet-explorer
Falch0n
Falch0n

Reputation: 305

jQuery addClass on loading window not working in IE

I can't get this code working in IE (11), what am I doing wrong here? Do I need to set a TimeOut?

jQuery(document).ready(function($) {
	// Smooth load body content
	$(window).on('load',function() {
			$('body').addClass('loaded');
	});
});
body {
  opacity: 0;
  color: black;
  background-color: white;
  -webkit-transition: all 2s ease; /* Safari */
  transition: all 2s ease;
}
body.loaded {
  opacity: 1;
}
<html>
<body>
  <h1>test</h1>
  <img src="http://placehold.it/400x400">
  
  <script type="text/javascript" language="Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>

Upvotes: 0

Views: 812

Answers (1)

Tristan Hudson
Tristan Hudson

Reputation: 151

You can add an event listener which should then work across browser. (Tested IE11 and Chrome). 

if(document.readyState === 'complete') {
    loadPage();
 } else {
    document.addEventListener('readystatechange', function(){
        if(document.readyState === 'complete')
            loadPage();
            }
    )};

function loadPage(){
    $('body').addClass('loaded');
}

JsFiddle demo

Upvotes: 2

Related Questions