博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery 判断图片加载完毕例子
阅读量:6844 次
发布时间:2019-06-26

本文共 1304 字,大约阅读时间需要 4 分钟。

  hot3.png

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

转载于:https://my.oschina.net/wolfx/blog/618135

你可能感兴趣的文章
AT&T:ONAP将在短期内发布代码
查看>>
嘿,微软:Windows Store到底有多少应用了?
查看>>
系统宕机:设备和应用不再是大问题,人为错误是关键
查看>>
来看看Win32资源监视器在Fluent Design设计语言下的样子
查看>>
网络攻击事件频发 黑客成当前最热门的技术工作
查看>>
保护地球的"保护伞" 艾特网能再提环保
查看>>
docker(8):使用alpinelinux 构建 golang http 看看能有多小
查看>>
物联网再升级 物联智慧MWC推新IoT方案
查看>>
云存储呼唤软实力
查看>>
未来,曙光说要像搭积木一样搭建数据中心
查看>>
惠州云计算智能终端产值 力争5年后达3000亿
查看>>
RocketMQ架构模块解析
查看>>
物联网时代需要开放、好用及可信的平台
查看>>
Android Monkey测试
查看>>
Intel芯将整合雷电技术 未来MBP因此便宜点
查看>>
常见物联网近距离无线通信技术解析
查看>>
《嵌入式 Linux C 语言应用程序设计(修订版)》——2.2 嵌入式Linux编辑器vi的使用...
查看>>
黑客发现 Adobe Flash 播放器第二个零日漏洞
查看>>
Docker —— 用于统一开发和部署的轻量级 Linux 容器 【已翻译100%】
查看>>
《初级会计电算化应用教程(金蝶KIS专业版)》——1.3 电算化会计信息系统
查看>>