0
$(document).ready(function(){
setTimeout(function(){$('.preloader').fadeOut()}, 5000);
});

This little bit of basic code shows a loading icon that fades out as the document loads. As you can see here http://www.intelligen.info it is slowly showing the content before it has loaded.

How do I change the above code so that it hides all content until it has completely loaded?

angela
  • 1,113
  • 3
  • 16
  • 34
  • document ready is fired once DOM is ready, not once all content is loaded. `$(window).on('load', handler);` seems what you are looking for – A. Wolff Feb 03 '14 at 14:43

2 Answers2

0

The entire page?

$(document).ready(function() {
    $('.preloader').fadeOut(300);
});

If you want to wait for the images too, then, well...

$(document).ready(function() {

    var imageCount = $('img').length;
    $('img').load(function() {
        imageCount--;
        if (imageCount <= 0)
            $('.preloader').fadeOut(300);
    });

});
casraf
  • 21,085
  • 9
  • 56
  • 91
0
$(document).on('ready', function () {
  // this is run first, as soon as we can play with the DOM
  showLoadingScreen();
});

$(window).on('load', function () {
  // this is run after, once all the content has loaded (img etc)
  hideLoadingScreen();
});
p3drosola
  • 5,784
  • 2
  • 23
  • 30
  • What if I only wanted it to hide the images on the page and not the rest of the content, how can that be achieved? – angela Feb 03 '14 at 14:55
  • That's a separate question, It's been asked, and answered several times on this site. Make sure to use a [solution that takes into account browser caching](http://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery) – p3drosola Feb 03 '14 at 15:02