替代window.load

Question

I have an Ajax page with some large images which are preloaded. I feel the need to display a div with a loading message, and then to fade it out when all images are loaded. Currently I use this code:

$(function () {

    $(window).load(function () {
        $('#images-loading').css({
            visibility: 'hidden'
        })
            .fadeTo(200, function () {
        });
    });

});

And the HTML is simply placed in the page <div id="images-loading"></div> Though, it does not work, and I don't fully understand why. By not working, I mean, it does not fade out. It just remains. I must say the script is placed in the actual ajax content itself, but is only fired when the page is refreshed. I lack the experience to solve this myself, so I'd appreciate any suggestions or some alterantive I can try out.

Answer 1

If you want to locally check for images loading, you could traverse over all img elements and check their load event or use a plugin such as waitForImages (disclaimer: written by me).

In the success callback, simply do...

$imagesLoading = $('#images-loading');

$imagesLoading.show();

$("#container").waitForImages(function() {
    $imagesLoading.fadeOut(200);
});

Answer 2

Currently you are doing a few little things wrong:

/// this first line basically says run my contents when the DOM is ready
$(function () {
  /// this second line says run my contents when the window is fully loaded
  /// but you are enabling this only after the DOM has loaded. Depending on
  /// the browser these two events can fire in either order so you may find
  /// situations where nothing would happen.
  $(window).load(function () {
    /// then you hide your image div
    $('#images-loading').css({
        visibility: 'hidden'
    })
    /// but then ask it to fade in
        .fadeTo(200, function () {
    });
  });
});

A better way to write the above is as so:

/// once the page has fully loaded - i.e. everything including
/// images is ready - then hide our loading message. Set this
/// listener first as it could fire at any time.
$(window).load(function () {
  $('#images-loading').stop().fadeOut(200);
});

/// as soon as the DOM is ready, show our loading message
/// the DOM event should fire before window load
$(function(){
  /// if you are learning it is far better to name your functions
  /// and then reference them where they are needed. It makes things
  /// easier to read.
  function whenFadeIsComplete(){
    alert('fade in complete');
  }
  /// rather than hide with setting style directly, use jQuery's own hide 
  /// function. Better still, use a CSS class directly on your #images-loading
  /// element that implements `display:none;` or `opacity:0;` - this will 
  /// render more quickly than JavaScript and mean you avoid your 
  /// loading div flickering into view before the fade in starts.
  $('#images-loading').hide().fadeTo(200, whenFadeIsComplete);
})

If you try the above it may fix your problem with regard to it only working when you forcibly refresh the page. However, you may find that if the images are cached in the browser, that you wont see your loading message (because the page loads too quickly) .. Forcing the browser refresh will clear the cache (in most browsers) and will give your message time to display again.