我试图弄清楚如果图像 src 路径无效或找不到图像,如何重新建立 img src。我有一个动态创建的 img src 路径,有时可能指向没有实际图像的目录。在这种情况下,我需要将 src 更改为 img/missing.jpg
。我已经做到了这一点,但没有运气:
$('.imgContainer').append( "<img id='pic' src='/dynamically/created/path/to/img.jpg'>" );
$('.imgContainer img#pic').load(function(){
if( $(this).width() == 0 && $(this).height() == 0 ){
$(this).attr({src: 'img/missing.jpg'})
.css({width:'100px', height:'100px'});
}
});
也许有更好的方法来做到这一点 - 但我不知道......我尝试使用 $(this).onerror =//some function
但不知道如何让它发挥作用。
任何帮助将不胜感激...
最佳答案
问题的关键在于,“load”事件仅在图像成功加载时才会在图像上触发 - 因此,如果您指定无效路径,则加载事件将永远不会发生。您需要“错误”处理程序,如下所示:
var img = $("<img id='pic' src='/dynamically/created/path/to/img.jpg'>")
.error(function(){
$(this).attr({src: 'img/missing.jpg'})
.css({width:'100px', height:'100px'});
})
.appendTo('.imgContainer');
我已经稍微简化了您的代码 - 因此顺序是:创建图像元素,绑定(bind)错误事件处理程序,然后附加到文档。我不知道这是否有任何实际区别,但在图像有机会开始加载之前设置处理程序似乎更有意义(否则理论上加载可能会在分配事件之前发生)。
此外,您对 width== 0 和 height == 0 的检查不适用于所有浏览器。 Chrome 和 Safari 都会为您提供它们显示的“破损图像”图标的宽度和高度:18x18px。
关于jquery在.load()函数中重新建立img src,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6234148/