判断资源并行加载完成的三种办法：计数、Promise及 $.Deferred

方法一：计数比较

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

// 如果有jqueryvar 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/

关键字：JavaScript, function, loadimg, var

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！