Detect page loaded with JavaScript

Question

I have a portfolio page filled with images that I would like to hide with a mask overlay until all the images have had a chance to finish loading. Is there a way to detect loading finished for all the content on a page?

I would like to find a way to do this, preferably using the jQuery library. Any ideas?

Answer 1

Assuming that the images you want to have finished loading before the overlay is removed all have the class .theImagesToLoad:

// count the number of images
var imageCount = $(".theImagesToLoad").length;

// init a load counter
var loadCounter = 0;
$(".theImagesToLoad").load(function() {

    // an image has loaded, increment load counter
    loadCounter++;

    // remove overlay once all images have loaded
    if(loadCounter == imageCount) {
        removeOverlay();
    }
}).each(function() {

    // make sure the `.load` event triggers
    // even when the image(s) have been cached
    // to ensure that the overlay is removed
    if(this.complete) $(this).trigger("load");
});

See: http://api.jquery.com/load-event/

Answer 2

You can use the window.onload event, it gets fired when all images have been loaded:

window.onload = function() {
  $('#maskoverlay').remove();
}

See here: https://developer.mozilla.org/en/DOM/window.onload