jQuery 判断所有图片加载完成

2024-04-25 01:38:12

对于图片的处理，例如幻灯片播放、缩放等，都是依赖于在所有图片完成之后再进行操作。

今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 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

jQuery 判断所有图片加载完成相关推荐

ajax请求中带判断语句例子,jQuery中借助deferred来请求及判断AJAX加载的实例讲解...
ajax请求异步队列加载我们在开发程序的时候通常会碰到使用ajax加载数据显示到列表的情况.ajax默认使用异步加载(async:true).为什么不使用同步呢,因为ajax同步加载会UI渲染线程阻塞 ...
Jquery图片懒加载和预加载
Jquery图片懒加载和预加载懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
jquery ajax 滚动加载数据
jquery php 滚动加载数据(文件包 rollingpage) 效果如下: 页面加载时候($function(){ 自动加载第一页数据 }) 设置: var winH = $(window).h ...
ajax静态加载图片,JQuery实现Ajax加载图片的方法
本文实例讲述了JQuery实现Ajax加载图片的方法.分享给大家供大家参考,具体如下: 最近在学习JQuery,想从原理上模拟一下无刷新的相册浏览. 最先想到的思路是利用缓存,也就是先显示提示消息,然 ...
上拉加载 php,jquery上拉加载代码及原理
jquery上拉加载更多原理: 其实就是判断下当前滚动条距离底部的距离滚动条距离底部小于一个值时候我们执行加载内容下面上jquery代码://$(window).height() 可视区域高度 ...
jQuery 超屏加载
jQuery 超屏加载,当文档超出屏幕的高度时,加载最新下个列数据 $(window).scroll(function () {var height = $(document).height(); / ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...
WebBrowser控件判断完全加载中DocumentCompleted和Navigated的关系
WebBrowser控件判断完全加载使用DocumentCompleted是有问题的,所以有人提出可以使用判断DocumentCompleted的次数和Navigated次数完全相等的方法判断是否完全 ...
Opencv判断是否加载图片的两种方法
加载图片是图像处理最基本的操作,但有的时候我们加载图片会因为图片路径不正确或者没有图片等原因而报错,经常写代码的凭经验就知道是哪错了,但初学者一般是看不懂这些错误,就会很恼火了,如果加个判断语句就 ...

最新文章

热门文章