栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

与浏览器无关的检测图像加载时间的方法

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

与浏览器无关的检测图像加载时间的方法

注意: 我是在2010年写的,当时的浏览器是IE8/9beta,Firefox3.x和Chrome4.x。请仅将此用于研究目的,我怀疑您可以将其复制/粘贴到现代浏览器中,并且可以正常使用。

警告:
现在是2017年,我仍然时不时地对此有所了解,请仅将其用于研究目的。我目前不知道如何检测图像加载状态,但是可能有比这更优雅的方法了……至少我非常希望有这种方法。我强烈建议不要在没有更多研究的情况下在生产环境中使用我的代码。

警告第二部分Electric Boogaloo: 现在是2019年,大多数jQuery功能现在已内置在vanilla
JS中。如果您仍在使用它,可能是时候停止并考虑前往MDN并阅读Vanilla JS提供的一些有趣的新东西了。


我参加这个聚会有点晚了,也许这个答案会对别人有所帮助…

如果您使用的是jQuery,请不要理会股票事件处理程序(onclick/onmouseover/etc),实际上完全不要再使用它们了。使用他们在API中提供的事件方法。


这将在将图像附加到主体之前发出警报,因为在将图像加载到内存中时会触发加载事件。它正是按照您的指示进行操作:使用test.jpg的src创建一个图像,当test.jpg加载时发出警报,然后将其附加到正文中。

var img = $('<img src="test.jpg" />');img.load(function() {    alert('Image Loaded');});$('body').append(img);

在将图像插入到主体之后,这将提醒您,再次执行您告诉它的操作:创建图像,设置事件(未设置src,因此尚未加载),将图像附加到主体(仍然nosrc),现在设置src …现在加载了图像,因此触发了事件。

var img = $('<img />');img.load(function() {    alert('Image Loaded');});$('body').append(img);$img.attr('src','test.jpg');

当然,您还可以添加一个错误处理程序,并使用bind()合并一堆事件。

var img = $('<img />');img.bind({    load: function() {        alert('Image loaded.');    },    error: function() {        alert('Error thrown, image didn't load, probably a 404.');    }});$('body').append(img);img.attr('src','test.jpg');

根据@ChrisKempen的要求…

这是一种非事件驱动的方法,用于确定在加载DOM之后图像是否损坏。此代码是StereoChrome的文章的代码的派生,该文章使用naturalWidth,naturalHeight和complete属性确定图像是否存在。

$('img').each(function() {    if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {        alert('broken image');    }});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575141.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号