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

EdwardUp 发布于2019-08-19 18:41 / 2476人阅读

摘要：方法一计数比较方法二使用兼容的话需要引入库方法三如果有更多请参考

方法一：计数比较

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/

GPU云服务器云服务器判断js加载完成判断一个js加载完成 promise_deferred区别云计算的三种服务模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79878.html

Node_深入浅出Node

摘要：简介项目命名为就是一个服务器单纯开发一个服务器的想法，变成构建网络应用的一个基本框架发展为一个强制不共享任何资源的单线程，单进程系统。单线程弱点无法利用多核错误会引起整个应用退出，应用的健壮性大量计算占用导致无法继续调用异步。 NodeJs简介 Ryan Dahl项目命名为：web.js 就是一个Web服务器.单纯开发一个Web服务器的想法，变成构建网络应用的一个基本框架.Node发展...

shinezejian 2019-08-19 18:48 评论0 收藏0
javascript知识点

摘要：握手过程中使用了的标志和。接收端收到后，回传一个带有标志的数据包以示传达确认信息。第四次挥手主动关闭方收到后，发送一个给被动关闭方，确认序号为收到序号，至此，完成四次挥手。其次，通过使和系统绑定来降低泄露后的危险。一些开放性题目 1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。 2.项目介绍 3.如何看待前端开发？ 4.平时是如何学习前端开发的？ 5....

zhangxiangliang 2019-08-20 14:21 评论0 收藏0
jQuery Deferred对象

摘要：给普通的操作指定回调函数对象的最大优点，就是它把这一套回调函数接口，从操作扩展到了所有操作。方法用于指定对象状态为已失败时的回调函数。执行完毕执行成功执行失败接收一个或多个对象作为参数，为其指定回调函数。什么是deferred对象开发网站的过程中，我们经常遇到某些耗时很长的javascript操作。其中，既有异步的操作（比如ajax读取服务器数据），也有同步的操作（比如遍历一个大型...

baoxl 2019-08-20 15:28 评论0 收藏0
一篇文章带你尝试拿下js异步

摘要：单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这决定了它只能是单线程，否则会带来很复杂的同步问题。小结本身是单线程的，并没有异步的特性。当异步函数执行时，回调函数会被压入这个队列。走在前端的大道上本篇将自己读过的相关 js异步的文章中，对自己有启发的章节片段总结在这（会对原文进行删改），会不断丰富提炼总结更新。概念 JS 是单线程的语言。单线程就意味着...

MartinDai 2019-08-21 18:24 评论0 收藏0
javascript异步编程详解

摘要：在服务器端，异步模式甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有请求，服务器性能会急剧下降，很快就会失去响应。第三是，捕捉不到他的错误异步编程方法回调函数这是异步编程最基本的方法。前言你可能知道，Javascript语言的执行环境是单线程（single thread）。所谓单线程，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面...

huangjinnan 2019-08-20 10:48 评论0 收藏0