【经验总结】跪求指导:如何判断图片是否加载完成
群里某筒子问了下,如何判断一张图片已经完成,把想到的可能的情况整理了下
一、一般情况下
1)图片静态页面标签<img />创建
<img src = 'http://www.baidu.com/img/baidu_sylogo1.gif' onload='onloadHandler(this)' />
2)图片通过脚本动态创建
1 var img = document.createElement('img'); 2 img.onload = function(){ 3 alert('img loaded, img.src = ' + this.src); 4 }; 5 img.onload = onloadHandler;
二、
假设页面原本有这么张静态图片,但没有通过行内脚本的绑定onloadHandler,如下代码所示:(有可能开发GG很痛恨行内脚本)
<img src="http://www.baidu.com/img/baidu_sylogo1.gif" id="pic" /> <!-- 假设此处有很多很多很多的资源要加载 --> <script> function $(id) { return document.getElementById(id);} function onloadHandler(){ alert('img loaded, img.src = ' + this.src); }; var img = $('pic'); img.onload = onloadHandler; img.src = "http://www.baidu.com/img/baidu_sylogo1.gif"; </script>
会有什么问题呢?有可能这段脚本运行之前,图片的onload事件已经触发了,于是,onloadHandler永远也不会执行 >_<
如何解决?—— img.complete
img.complete:如果图片之前已经加载完成,则为true,否则为false
<script> function $(id) { return document.getElementById(id);} function onloadHandler(){ alert('img loaded, img.src = ' + this.src); }; var img = $('pic'); img.src = "http://www.baidu.com/img/baidu_sylogo1.gif"; if(img.complete){ onloadHandler.call(img); }else{ img.onload =onloadHandler; //注意这里跟上面的区别,img.src赋值 与 绑定 onload事件的顺序相反
} </script>
写在后面:以上代码未经各大浏览器/版本 严格摧残验证,以下问题尚待验证,求不小心踩进来的大大指教!
1)是否所有主流浏览器均支持 img.complete(包括不同版本)
2)有没有可能在第一个分支判断 if(img.complete) 结束后,但未运行到 img.onload 这块代码,img的onload事件已经触发,导致onloadHandler不会执行
下面这段代码中间插了个耗时无比的逻辑,延迟onload的绑定,结果:onload处理方法还是执行了
var img = document.createElement('img'); img.src = 'http://im-img.qq.com/inc/images/new_header2/logo.gif'; if(img.complete){ console.log('a'); onloadHandler.call(img); }else{ var t1 = new Date() - 0; var div = document.createElement('div'); for(var i=0; i<10000; i++){ div.innerHTML = div.innerHTML + i; } document.body.appendChild(div); var t2 = new Date() - 0; console.log(t2 - t1); //在chrome23.0里,6000++ms img.onload = onloadHandler; img.onload = onloadHandler; //神奇的事情:onload事件触发,而且处理方法被执行了 }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义