一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jquery 判断图片加载完毕例子

时间:2014-06-13 编辑:简简单单 来源:一聚教程网

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

热门栏目