如果你想这样做,与Deferreds /许诺,那么,你可以这样做如下:
$(function() {
function loadRow($imgs, timeout) {
var dfrd = $.Deferred(),
n = 0;
$imgs.each(function() {
this.onload = function() {
if(++n == $imgs.length) { dfrd.resolve(); }
}
this.src = "/path/to/img";
});
setTimeout(dfrd.resolve, timeout);//in case of slow network or img.onload failure
return dfrd.promise();
}
var $images = $(img.whatever),//adjust as required
rowlength = 5,//adjust as required
rowFilter = function(i) {
return function(index) {
return (index > i * rowlength) && (index < (i+1) * rowlength);
}
},
nRows = Math.ceil($images.length/rowlength);
timeout = 10000,//(ms) adjust as required
d = $.Deferred().resolve();
for(var i=0; i<nRows; i++) {
var $imgs = $images.filter(rowFilter(i));
d = d.then(loadRow($imgs, timeout));
}
});
未经检验
loadRow()
负载一行,并返回一个该行在加载或超时时已解决的Promise。
的代码的其余部分:
- 建立用于图像的装置,以由行索引来选择。
- 建立了一个种子Deferred,它立即解析以允许加载过程开始。
- 建立了几个其他的变量。
- 循环遍历行建立一个
.then()
链,它随着它的进展调用loadRow()
。
.then()
链是控制行加载顺序的机制。
该代码比其他答案中的代码体积更大,但它对于您来说也稍微多一点,因为它包含超时机制。如果您有更简洁的方法选择每一行中的图像,它将会简化。
为什么你同时设置img.src和background-image? – Tommi