jQuery，如何预加载图像并在图像加载时得到通知？

Question

我对所有的Javascript资料仍然陌生，我必须诚实地说，我还没有试验任何与我的问题有关的东西。

我想知道是否有一种方法或插件与jQuery预加载多个图像和图像加载时调用函数？

Answer 1

您可以使用load事件来处理图像，但它们有一些跨浏览器问题（这取决于您定位的平台）。

var allImgs = $("#container img").filter(function() { return ! this.complete; }); 
var allImgsLength = allImgs.length; 

allImgs.on("load", function() { 
    if (--allImgsLength) { 
     // Images have loaded. 
    } 
}); 

如果你不介意的话，包括一个插件，有waitForImages（免责声明：我写的），其中处理这个比较好听。 :)

你会使用它就像...

$("#container").waitForImages(function() { 
    // Images have loaded. 
}); 

如果你不想使用jQuery的一切，你能适应的第一个例子。如果您只指定现代浏览器...

var allImgs = [].filter.call(document.querySelectorAll("#container img"), 
          function(img) { 
           return ! img.complete; 
          }); 
var allImgsLength = allImgs.length; 

[].forEach.call(allImgs, function(img) { 
    img.addEventListener(function() { 
     if (--allImgsLength) { 
      // Images have loaded. 
     } 
    }); 
}); 

如果你必须支持旧的浏览器...（HTTP [使用jQuery预先载入图像]的

var allImgs = document.getElementById("container").getElementsByTagName("img"); 
var allImgsLength = allImgs.length; 
var i; 
var eventCallback = function() { 
         if (--allImgsLength) { 
          // Images have loaded. 
         } 
        }; 

for (i = 0; i < allImgsLength; i++) { 
    if (allImgs[i].complete) { 
     allImgsLength--; 
    } 

    if (allImgs[i].addEventListener) { 
     allImgs[i].addEventListener("load", eventCallback); 
    } elseif (allImgs[i].attachEvent) { 
     allImgs[i].attachEvent("onload", eventCallback); 
    } else { 
     allImgs[i].onload = eventCallback; 
    } 
}