今天做一个截图功能需要先判断图片是不是加载完了,如果加载完了我们就可以操作了否则可以刷新等待加载了,下面文章整理了基于jquery图片加载判断的例子,大家可参考一下。
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经强很多。