不要通过Onload属性显示损坏的图像

Question

我有一个有很多图像的网站.其中一些在服务器上丢失 - 由所有者删除.

如果未加载(损坏)图像,我想显示占位符 - 标准图像,表示图像丢失.

我不想重写所有模板,所以我不能将onError属性添加到每个图像标记,所以我不能使用这个解决方案:jQuery/JavaScript来替换损坏的图像

是否可以编写全局函数来检查所有图像并替换损坏的负载？

Answer 1

是的,因为你的标签中有jQuery,你可以使用jQuery作为例子.

将onerror处理程序绑定到所有<img>节点:

$( 'img' ).on( 'error', function() {
    $( this ).attr( 'src', 'http://path.to.your/image.jpg' );
});

在普通的JS中,这可以这样做:

var images = document.getElementsByTagName( 'img' )
  , i, len;

for( var i = 0, len = images.length; i < len; i++ ) {
    (function( i ) {
        images[ i ].onerror = function() {
            images[ i ].onerror = null;
            images[ i ].src = 'http://path.to.your/image.jpg';
        };
    })( i );
}