本文作者:文蔺
本文地址:http://www.wemlion.com/2016/when-are-all-resources-all-loaded/
本文由 @文蔺 创作,转载请保留此声明。
所有权利保留,请勿用于商业目的。

方法一:计数比较

function loadImg(url, cb) {
var img = new Image();
img.src = url;
img.onload = cb;
}

function loadImages(urlArr, afterAllLoadedFunc) {
var count = urlArr.length;
var loadedCount = 0;

for (var i = count - 1; i >= 0; i--) {
loadImg(urlArr[i], function () {
loadedCount += 1;
if (count === loadedCount) {
afterAllLoadedFunc();
}
});
}
}

loadImages(['./xx.jpg', './yy.jpg', './zz.jpg'], function () {
alert('all imgs have been loaded');
});

方法二:Promise

// 使用 Promise
// 兼容的话需要引入 es6-promise 库

var loadImg = function (url) {
return new Promise(function (resolve, reject) {
var img = new Image();
img.src = url;
img.onload = function () {
resolve() ;
};
img.onerror = function () {
reject() ;
};
});
};

Promise.all([
loadImg('xxx.jpg'),
loadImg('yyy.jpg'),
loadImg('zzz.jpg'),
]).then(function () {
alert('all images are loaded!')
});

方法三:$.Deferred

// 如果有jquery
var loadImg = function (url) {
var defer = $.Deferred();

var img = new Image();
img.src = url;
img.onload = function () {
defer.resolve() ;
};
img.onerror = function () {
defer.reject() ;
};

return defer.promise();
};

$.when(loadImg('xx.jpg'), loadImg('yy.jpg'), loadImg('zz.jpg')).done(function () {
alert('all images are loaded!')
});

更多请参考 http://angusfu.github.io/slides/promise/

本文作者:文蔺
本文地址:http://www.wemlion.com/2016/when-are-all-resources-all-loaded/
转载请注明来源