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/

Answer 2

您可以使用window.onload事件，在加载所有图片后会触发该事件：

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

见这里：https://developer.mozilla.org/en/DOM/window.onload

Answer 3

当DOM准备就绪时，jQuery就绪事件不会在加载所有图像时触发。您可以按照之前的建议使用window.onload，或者如果您想使用jQuery，可以像下面这样使用load事件：

$(window).load(function () {
  // run code
});

Answer 4

准备好文件：

$(function(){

   // Your code

});

但是，您必须使用页面加载CSS中的掩码，然后使用上面的函数将其删除。在加载所有图像之前，您将无法在javascript中创建蒙版，除非您再次使用javascript来压缩图像加载，创建蒙版，加载图像，然后移除蒙版

Answer 5

或者您可以使用：

$(document).ready(function(){
    //your code
}

修改

抱歉可能误解了你，这个插件可能对你有帮助：

https://gist.github.com/268257

Answer 6

我认为您可以对<body>标记使用onload事件并附加到函数

或者您可以使用jquery

$(document).ready(function(){
});

Answer 7

喜欢什么？

$(function() {
    var img = [];
    var imgarr = ["image1.png","image2.png", ....];
    var imgcount = 0;

    var loadTimer;
    loadTimer = setInterval(function() {
        if(imgcount == imgarr.length){
           clearInterval(loadTimer);

           // ALL IMAGES ARE DONE LOADING HERE
           //   use : $(img) to have a JQuery object of the image elements
        }
    },100);

    $(imageContainer).hide();
    for(var i=0;i<imgarr.length;i++){
        img[i] = new Image();
        img.style.display = 'none';
        $(img[i]).appendTo(imageContainer);
        img[i].src = imgarr[i];
        img[i].onload = function() { imgcount++; }
    }
});

检测用Javascript加载的页面

7 个答案: