sanjihan sanjihan - 1 year ago 51
CSS Question

Display website once all images are ready to display

I use this code to animate opacity of the whole website.

HTML
<body>
<script>document.body.className += ' fade-out';</script>
...
</body>

JS
$(function(){
$('body').removeClass('fade-out');
});

CSS:
body{
transition:1s all;
}
body.fade-out {
opacity: 0;
transition: none;
}


Take this pen for example:
https://codepen.io/timsim/pen/bWOoYr

This animates the websites opacity, but it doesn't wait for all images to be ready to display. Whole website is changing opacity, and then the image jumps in. Not nice at all. this only happen the first time the website is loaded.

i would like to trigger body opacity animation when the images are ready to display. window.onload does not seem to be the correct place. How would you do that?

Answer Source

Wrap your jQuery code inside:

$(window).on("load", function() {
});

And don't use the $(document).ready();

The DOM is ready also when images are not loaded. The on load will be triggered once images will finish to be downloaded. So in your case:

$(window).on("load", function() {
  $('body').removeClass('fade-out');
});

This should do what you are looking for

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download