jquery 判断图片加载完毕例子

complete判断图片是否加载了

jquery 判断图片加载完毕例子

www.111cn.net 编辑:opertion 来源:本站整理

今天做一个截图功能需要先判断图片是不是加载完了，如果加载完了我们就可以操作了否则可以刷新等待加载了，下面文章整理了基于jquery图片加载判断的例子，大家可参考一下。

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

代码如下	复制代码
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").οnlοad=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经强很多。