玩法介绍当前位置:鸿宇娱乐 > 玩法介绍 > >

jQuery 判断图片是否加载完成方法汇总

  

[jQuery,图片是否加载完成]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 来接受数组参数。

  

  

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经强很多。

  

(责任编辑:admin)

上一篇:鸿宇娱乐平台:APP软件应用功能及丰富的交互展

下一篇:开发者可直接在App

推荐内容

客户服务热线

010-400-12345

在线客服