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 来接受数组参数。

转载于:https://www.cnblogs.com/good10000/p/4717046.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/262984.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过ClassLoader调用外部jar包

通过ClassLoader调用外部jar包 我们大家都知道,每个运行中的线程都有一个成员contextClassLoader,用来在运行时动态地载入其它类。 系统默认的contextClassLoader是systemClassLoader,所以一般而言java程序在执行时可以使用JVM自带的类、$JAV…

PDU (Protocol Data Unit) - 协议数据单元

协议数据单元PDU(Protocol Data Unit)是指对等层次之间传递的数据单位。 物理层的PDU是数据位(bit)数据链路层的PDU是数据帧(frame)网络层的PDU是数据包(packet)传输层的PDU是数据段…

Git回滚操作的总结

git结构和各操作之间的关系 1,撤销add操作: git reset 2,撤销commit操作: git reset –soft 保留源码,只回退commit信息到某个版本,不涉及index的回退,如果还需要提交,直接commit即…

[Python学习] 模块三.基本字符串

于Python最重要的数据类型包含字符串、名单、元组和字典.本文重点介绍Python基础知识. 一.字符串基础 字符串指一有序的字符序列集合,用单引號、双引號、三重(单双均可)引號引起来.如: s1www.csdn.net s2"www.csdn.net" s3aaabbb 当中字符串又包…

AjaxControlToolkit控件效果演示

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Default.aspx div圆角 tags 日期控件等等转载于:https://www.cnblogs.com/freedom831215/archive/2011/12/13/2286051.html

weekendplan

周五晚 交流 能多早睡觉就多早睡觉 周六 给寮母交外出单 打工 外泊 周日 下午返回 整理房间 见高桥 复习 能多早睡觉就多早睡觉 转载于:https://www.cnblogs.com/loverain/archive/2007/11/16/961473.html

Blender建模与游戏换装(转载文)

本文转载自https://my.oschina.net/huliqing/blog/880113?hmsrtoutiao.io 如果本文涉及侵权行为,请原作者联系博主邮箱,我将及时进行删除处理 博主邮箱:yibiandaoaliyun.com 前言 本文将详细讲解3D游戏中换装的原理及换装中的一些重点问题&a…

是否非要用interface关键字来实现接口?

想法我还不能系统的表达, 先发个测试, 大家看看有没有毛病.委托测试:publicdelegateT Func1<T, T1>(T1 t);publicclassFuncTest { publicreadonlyFunc1<long, long>Test; publicFuncTest() { Test Fib; } privatelong…

AS3 调用外部SWF中元件库中的元件 【转】

参考文章&#xff1a; http://www.blueidea.com/tech/multimedia/2008/5842_2.asp 本文来自CSDN博客&#xff0c;转载请标明出处&#xff1a;http://blog.csdn.net/djy1135/archive/2009/11/13/4807925.aspx 一、目的 bb.swf的元件库中有一个元件&#xff0c;在aa.swf中调用这个…

好文章,被架构师秒杀之后

.jdk1.5新增的功能------》2.字符流和字节流的区别&#xff0c;使用场景&#xff0c;相关类 >>>3.线程安全的概念&#xff0c;实现线程安全的几种方法 >>>4.抽象类和接口的区别&#xff0c;使用场景 >>>5.hash算法的实现原理&#xff0c;hash…

出路在哪里?出路在于思路!智者无敌

有人工作&#xff0c;有人继续上学&#xff0c;大家千万不要错过这篇文章&#xff0c;能看到这篇文章也是一种幸运&#xff0c;真的受益匪浅&#xff0c;对我有很大启迪&#xff0c;这篇文章将会改变我的一生&#xff0c;真的太好了&#xff0c;希望与有缘人分享&#xff0c;也…

电缆电压降计算

电缆电压降计算 UI*Z*L I电缆通过的电流 Z电缆阻抗 L电缆长度 阻抗Z可以通过电缆手册中给出的公式计算转载于:https://www.cnblogs.com/tihua/archive/2007/11/23/969627.html

C# 动态添加SEO 信息,不和静态页面重复和叠加

动态添加SEO 信息&#xff0c;不和静态页面重复和叠加&#xff0c;就一个方法&#xff0c;用到了做个记录&#xff0c;以后直接用就OK了&#xff0c;需要的同学也可以直接拿去用。 1 /// <summary> 2 /// 动态设置 SEO 信息 3 /// </summary> 4 /// <pa…

SVN“验证位置时发生错误”的解决办法

验证位置时发生错误:“org.tigris.subversion.javahl.ClientException...... 验证位置时发生错误:“org.tigris.subversion.javahl.ClientException: RA layer request failed svn: Server sent unexpected return value (403 Forbidden) in response to OPTIONS request for h…

Day_03-函数和模块的使用

使用函数求阶乘 使用while循环的代码&#xff1a; m float(input(m ))n float(input(n ))mn m - nfm 1while m ! 1:fm * mm - 1fn 1while n ! 1:fn * nn - 1fmn 1while mn ! 1:fmn * mnmn - 1print(fm // fn // fmn)定义函数块&#xff1a; def C_N_M(parm):fmn 1for …

Visual Studio Team System 2008 Team Suite (90-day Trial)(转)

Visual Studio Team System 2008 Team Suite (90-day Trial) 相关介绍&#xff1a; http://www.microsoft.com/downloads/details.aspx?familyidD95598D7-AA6E-4F24-82E3-81570C5384CB&displaylangen 直接下载地址&#xff1a; http://download.microsoft.com/download/d/…

xml02 XML编程(CRUD)增删查改

XML解析技术概述 Demo2.java import javax.xml.parsers.DocumentBuilder; import javax.xml.parsers.DocumentBuilderFactory; import org.w3c.dom.Document; public class Demo2 { public static void main(String args[])throws Exception { //1.创建工程 DocumentBuilderFac…

猜数字

写一个猜数字脚本&#xff0c;当用户输入的数字和预设数字&#xff08;随机生成一个小于100的数字&#xff09;一样时&#xff0c;直接退出&#xff0c;否则让用户一直输入&#xff0c;并且提示用户的数字比预设数字大或者小。#!/bin/bashmecho $RANDOMn1$[$m%100]while :do …

3DMax插件和它的3DXI接口

3DXI是3DMax提供给游戏开发者的一套数据读取接口&#xff0c;之前它被称作为IGame。最近一直在搞Ogre的插件相关的文档都很少我相信搞这个的人很多&#xff0c;但是有时间整理拿出来共享的资料实在是太少Ogre自带的maxExplorer只是xml格式&#xff0c;二进制数据的导出竟然未完…

ASP.NET Web Game 架构设计1--服务器基本结构

ASP.NET Web Game 架构设计1--服务器基本结构 1. 基本结构图 2. 系统组成与角色 整个系统大体上分为三个部分&#xff1a;1.网页客户端。2.IIS Web服务器。3.数据库及逻辑服务器。其中Web服务器不处理任何逻辑&#xff0c;它的作用只有两点&#xff1a;1.承载用户。…