事后,是否有办法告诉图像(使用
标签,而不是通过JS放置)是否已正确加载到页面中? 我有一个头像镜头,偶尔第三方图像服务器最终提供404.我可以更改服务器端代码使用onerror="showGenericHeadshot()"
,但我真的想避免进行更改到服务器端代码。 最终,我想确定图像是否丢失或损坏,并用通用的“未找到图像”图形替换它。 我尝试过的事情:
jQuery('#testImage').bind('load',function(){ alert ('iamge loaded'); });
避免竞争条件如下
// i have added an underscore character before src jQuery('img').each(function(){ var _elm=jQuery(this); _elm.bind('load',_imageLoaded).attr('src',_elm.attr('_src')) }); function _imageLoaded() { alert('img loaded'); }
不幸的是,我无法接受@TJ Crowder和@ Praveen的优秀答案,尽管两者都能完成所需的图像替换。 @Praveen的答案需要更改HTML(在这种情况下,我应该只是挂钩
标签自己的error=""
事件属性。并且根据网络活动来判断,如果您尝试使用HTML创建新图像在同一页面中只有404的图像的url,请求实际上第二次被发送。图像服务器失败的部分原因至少部分是我们的流量;所以我真的必须做我能做的一切保持要求下降或问题只会变得更糟..
@ danp对我的问题的评论中提到的SO问题实际上给了我答案,尽管这不是那里接受的答案。 我能够确认它适用于IE 7&8,FF和webkit浏览器。 我怀疑它是否适用于旧浏览器,所以我在那里有一个try/catch
来处理任何exception。 更糟糕的情况是没有图像替换发生,这与现在没有做任何事情的情况没有什么不同。 我正在使用的实现如下:
$(function() { $('img[src*=images.3rdparty.com]').each( function() { try { if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) { this.src = 'https://myserver.com/images/no_photo.gif'; } } catch(e) {} } ); });
替代文字是否足够? 如果是这样,您可以使用img标记的alt属性。
我想我已经知道了:当DOM被加载时(甚至在window.load
事件上 – 毕竟,当你想要获得所有图像时,你想要这样做),你可以追溯检查通过创建一个新的img
元素,挂钩它的load
和error
事件,然后循环从你的每个爆头抓取src
,图像是可以的。 类似下面的代码( 实例 )。 该代码刚刚破灭,它不是生产质量 – 例如,您可能需要超时,之后如果您没有收到任何load
或error
,您会认为是错误。 (您可能必须更换您的检查图像才能可靠地处理它。)
这种技术假设重用src
不会重新加载图像,我认为这是一个相当可靠的假设(它当然是一个容易测试的假设),因为这种技术已被用于永久地预先处理图像。
我已经在Chrome,Firefox和Opera for Linux以及IE6(是的,真的)和IE8 for Windows上测试了以下内容。 做了一个享受。
jQuery(function($) { var imgs, checker, index, start; // Obviously, adjust this selector to match just your headshots imgs = $('img'); if (imgs.length > 0) { // Create the checker, hide it, and append it checker = $("
").hide().appendTo(document.body); // Hook it up checker.load(imageLoaded).error(imageFailed); // Start our loop index = 0; display("Verifying"); start = now(); verify(); } function now() { return +new Date(); } function verify() { if (!imgs || index >= imgs.length) { display("Done verifying, total time = " + (now() - start) + "ms"); checker.remove(); checker = undefined; return; } checker[0].src = imgs[index].src; } function imageLoaded() { display("Image " + index + " loaded successfully"); ++index; verify(); } function imageFailed() { display("Image " + index + " failed"); ++index; verify(); } function display(msg) { $("" + now() + ": " + msg + "
").appendTo(document.body); } });
实例
需要了解更多jQuery教程分享如何判断图像是否已正确加载,都可以关注jQuery技术分享栏目—计算机技术网(www.ctvol.com)!
以上就是jQuery教程分享如何判断图像是否已正确加载相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址:https://www.ctvol.com/jquerytutorial/981983.html