• jQuery如何判断所有图片都加载完成
  • 码农007 发表于 2016/2/24 15:38:00 | 分类标签: jQuery 加载图片 获取属性
  • 对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。

    今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。

    一、普通方法

    监听 img 的 load 方法,每 load 一张图片比较一次。关键代码如下:

    var num = $img.length;
    
    $imgs.load(function() {
        num--;
        if (num > 0) {
            return;
        }
        console.log('load compeleted');
    }
    

    二、使用 jQuery 中的 Deferred 对象

    Deferred 对象是从 jQuery 1.5.0 版本开始引入的一个新功能,详细介绍可以见 官方文档

    简单的说,Deferred 对象就是jQuery的回调函数解决方案,它解决了如何处理耗时操作的问题, 对那些操作提供了更好的控制,以及统一的编程接口。

    阮一峰有一篇文章是介绍 Deferred 对象的,写的比较详细,对于入门比较有用。

    jQuery的deferred对象详解

    在这里,我们用到了:

    • deferred.resolve(): Resolve a Deferred object and call any doneCallbacks with the given args.
    • deferred.when(): Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.
    • deferred.done(): Add handlers to be called when the Deferred object is resolved.

    关键代码:

    var defereds = [];
    
    $imgs.each(function() {
        var dfd = $.Deferred();
    
        $(this).load(dfd.resolve);
        defereds.push(dfd);
    });
    $.when.apply(null, defereds).done(function() {
        console.log('load compeleted');
    });
    

    基本思路:
    每加载完一张图片 resolve(),when() 当所有的 Deferred 完成便执行 done()。

    注: 因为 $.when 支持的参数是 $.when(dfd1, dfd2, dfd3, ...),所以我们这里使用了 apply 来接受数组参数。

  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:码农007
  • 加入时间:2014/6/1 14:39:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮