jquery在.load()函数中重新建立img src

我试图弄清楚如果图像src路径无效或没有找到图像,如何重新建立img src。 我有一个动态创建的img src路径,有时可能指向没有实际图像的目录。 在这种情况下,我需要将src更改为img/missing.jpg 。 我这样做没有运气:

 $('.imgContainer').append( "" ); $('.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但无法弄清楚如何$(this).onerror = //some function工作。

任何帮助将不胜感激…

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

 var img = $("") .error(function(){ $(this).attr({src: 'img/missing.jpg'}) .css({width:'100px', height:'100px'}); }) .appendTo('.imgContainer'); 

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

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