检测用Javascript加载的页面

Question

所以,我有一个充满图像的投资组合页面,我想用掩模覆盖隐藏,直到所有图像都有机会完成加载.有没有办法检测页面上所有内容的加载完成？

我想找到一种方法来实现这一点,最好使用jquery库.有任何想法吗？

Answer 1

假设在删除叠加层之前要完成加载的图像都具有以下类.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");
});

请参阅:http: //api.jquery.com/load-event/