jQuery:如何检查何时加载数组中的所有图像?
我有一个图像数组(确切的图像数量不同),当它们全部加载时我想要一些代码来执行。
我试过这个,但它不起作用:
myImgArray.load(function(){ alert('loaded'); });
我明白了
33:未捕获的TypeError:对象[对象对象],[对象对象],[对象对象],[对象对象]没有方法’加载’
我不认为for循环或类似的东西会起作用,因为图像可能并且可能会以“随机”顺序加载。
我知道这样做的唯一方法是为每个图像附加一个加载处理程序并保持已加载的数量。 当你达到你的总数时,他们都被装满了。
这是执行此操作的代码:
var urls = [ "http://sofzh.miximages.com/javascript/344291068_HdnTo-Ti.jpg", "http://sofzh.miximages.com/javascript/344292111_SvSfK-Ti.jpg", "http://sofzh.miximages.com/javascript/344291168_nErcq-Ti.jpg" ]; var imgs = []; var cnt = 0; for (var i = 0; i < urls.length; i++) { var img = new Image(); img.onload = function() { ++cnt; if (cnt >= urls.length) { // all images loaded here } else { // still more images to load } }; img.src = urls[i]; imgs.push(img); }
你可以在这里看到它: http : //jsfiddle.net/jfriend00/7KF7V/
为此,必须在设置.src
属性之前分配onload
处理函数,因为如果图像在浏览器缓存中,onload可能会在分配.onload
之前立即.onload
,从而错过事件。