本文作者:文蔺
本文地址: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
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
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/
转载请注明来源