Question

如果图像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但无法弄清楚如何让它工作。

任何帮助将不胜感激......

Answer 1

问题的关键是“加载”事件仅在成功加载图像时触发图像 - 因此，如果指定了无效路径，则永远不会发生加载事件。你需要'错误'处理程序，如下所示：

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');

我已经简化了你的代码 - 所以顺序是：创建图像元素，绑定错误事件处理程序，然后附加到文档。我不知道它是否有任何实际区别，但在图像有机会开始加载之前设置处理程序似乎更有意义（否则理论上可以在分配事件之前发生加载）。

此外，检查width == 0和height == 0将无法在所有浏览器中使用。 Chrome和Safari都会显示它们显示的“损坏图像”图标的宽度和高度：18x18px。

jquery在.load（）函数中重新建立img src

1 个答案: