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的回调函数解决方案,它解决了如何处理耗时操作的问题, 对那些操作提供了更好的控制,以及统一的编程接口。

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

complete判断图片是否加载了

感谢谷歌,找到了好使的方法,简单用法就是:

qim=new Image();//新建一个图片;
qim.src=$preload;//图片地址是你准备要加载的地址;
if(qim.complete){ $("#cxNfloor").html($filetoload);//qim.complete表示这个图片是否加载完毕了
}

后来又发现一个方法

$("").load(function(){...});

其中选择器是图片的id或class,function里面的方法就是回调函数,在图片加载完成后执行,但是我试验了很多,压根儿不是那么回事,正确的解决方法是:

//jquery的方式
$("#imageId").load(function(){
  alert("加载完成!");
});

有朋友说使用js是最好的,方法如下

document.getElementById("img2").onload=function(){}

在网上找到一段代码

例子

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象,实现图片的预下载
 img.src = url;
  
 if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
   callback.call(img);
   return; // 直接返回,不用再处理onload事件
  }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
    callback.call(img);//将回调函数的this替换为Image对象
  };
};

下面是针对多个image的加载判断。

var imgdefereds=[];
$('img').each(function(){
 var dfd=$.Deferred();
 $(this).bind('load',function(){
 dfd.resolve();
 }).bind('error',function(){
 //图片加载错误,加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
 dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
  callback();
});

使用这种方法就可以避免window.onload的不足,不过代码稍显复杂 在性能方面比起window.onload经强很多。

Image placeholder
前端答疑
未设置
  35人点赞

没有讨论,发表一下自己的看法吧

推荐文章
jquery判断页面是否加载完成?

jquery判断页面是否加载完成?1、使用$(document).ready()$(document).ready(function(){ alert('dom加载完成'); });2、简写方式(推荐

如何判断css加载完成?

如何判断css加载完成?要判断这个CSS文件是否加载完毕,各个浏览器的做法差异比较大。IE下可以直接使用onload事件来监听css加载。Firefox和webkit内核的浏览器,需要使用setTim

判断是否加载了jquery?

判断是否加载了jquery?当前网页加载jQuery后,jQuery()或$()函数将会被定义,所以检测jQuery是否已经加载存在以下2种方法:方法1:if(jQuery){ //jQuery已加载

jquery如何判断元素是否存在?

jquery如何判断元素是否存在?jquery使用$(selector)方法查找dom元素,返回的是一个jquery对象,具有length属性。length即找到的dom元素个数,只需判断length

jquery如何判断元素内容是否为空?

jquery如何判断元素内容是否为空?下面提供了两种方法用于检查指定id的元素的内容是否为空,当然了,不仅仅适用于指定了id的元素,同样适用于其他元素,只需要改变选择器即可。一、使用html()方法获

jquery如何判断是否是对象?

jquery如何判断是否是对象?jquery提供了isPlainObject方法来判断一个变量是否是对象类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2];

jquery如何判断是否是数组?

jquery如何判断是否是数组?jquery提供了isArray方法来判断一个变量是否是数组类型,返回值为Boolean类型。例子:varobj={a:1}; vararr=[1,2]; varbo

jquery如何判断对象是否获取焦点?

jquery如何判断对象是否获取焦点?jquery判断对象获取焦点可以使用$(selector).is(":focus")。当对象具有焦点时返回为true,否则返回为false。语法:$(select

jquery如何判断对象是否存在?

jquery如何判断对象是否存在?一、jQuery判断对象是否存在1、方法一在jQuery中,varobj=$("#id")无论id这个控件是否存在,都是返回object,所以需要通过length来判

jquery如何判断属性是否存在?

jquery如何判断属性是否存在?jquery判断属性存在可以使用attr()方法、is()方法、filter()方法,以及原生js的hasAttribute()方法。1、使用attr()获取属性,检

jquery如何判断值是否是url地址?

jquery如何判断值是否是url地址?思路:1、创建一个输入框,使用jquery给它注册change事件;2、创建一个函数checkUrl,传入一个url参数;3、函数内编写一条检测url正确性的正

jquery如何判断是否是ie浏览器?

jquery如何判断是否是ie浏览器?在写页面的时候,会遇到浏览器兼容问题,在这个浏览器中可以使用,但在其他浏览器中却不能很好的显示。以下就是判断浏览器的方法,从而更好的区分代码,使得页面正常浏览。f

jquery如何判断是否为数组?

jquery如何判断是否为数组?$.isArray()函数用于判断指定参数是否是一个数组。只需要将需要判断的变量传入方法中即可。语法$.isArray(object)/jQuery.isArray(o

jquery如何判断元素是否在数组中?

要判断数组中是否包含某个元素,从原理来来说,就是遍历整个数组,然后判断是否相等。可以使用Jquery提供的方法:$.inArray("元素(字符串)",数组名称)进行判断,当存在该元素(字符串)时,返

jquery如何判断字符串是否包含指定字符?

方法一:使用indexOf()和lastIndexOf()方法案例:varCts="bblText"; if(Cts.indexOf("Text")>=0){ alert('Cts中包含Text字符串

jquery如何判断复选框是否被选中?

方法一:get(0).checkedif($("#checkbox-id").get(0).checked){ //dosomething }方法二:is(':checked')if($('#chec

jquery如何判断某个属性是否存在?

在JQuery中,我们会判断元素是否存在某个属性。比如是否包含class="new"的样式呢?在JQuery中判断是非常简单的。因为有hasClass这个方法,使用$("input[name=new]

jquery如何判断的是否为数字?

方法一:使用isNaN()函数varval=$("#test").val(); varival=parseInt(val);//如果变量val是字符类型的数则转换为int类型如果不是则ival为NaN

jquery如何判断是否为对象?

在jquery中,可以使用isPlainObject()方法来判断是否为对象。示例:varobj={a:1} varbool=$.isPlainObject(obj)判断是否为对象返回Boolean

jquery如何判断是否为数字?

在jquery里,我们可以用下面这些方法来判断变量是否是数字:1、$.isNumeric();jquery里内置的一个用来判断是否为数字的函数,用$.isNumeric()来判断是否为数字的话,一些特

jquery如何判断是否为json格式?

jquery如何判断是否为json格式?思路:使用jquery的parseJSON()方法,将字符串转为json对象,并用trycatch语句捕获错误,没有异常,则是json格式,否则不是。funct

jquery如何判断某个dom节点是否存在?

想要判断某个dom节点是否存在,可以使用length属性来判断。jquery使用length属性判断length属性包含jQuery对象中元素的数目。示例: 这里是i

jquery如何判断字符串是否相等?

在jquery中字符串比较没有equals()方法,要比较两个字符串是否相等可以直接用==来进行判断。有时需要注意空格!可以先使用$.trim(str)去掉字符串起始和结尾的空格,然后使用用==来进行

jquery如何判断对象是否为空?

$.isEmptyObject$.isEmptyObject()函数用于检查对象是否为空(不包含任何属性)。调用格式如下:$.isEmptyObject(obj);其中,参数obj表示需要检测的对象名

如何判断是否为jquery对象?

要判断一个javascript的对象是什么类型,可以使用typeof,但是typeof只能判断出js的基础对象(string,boolean,number,object)而,判断一个对象是否为jque