javascript - 检测加载了 JavaScript 的页面

Question

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

我想找到一种方法来做到这一点，最好是使用 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/