Question

我有一个包含大量图片的网站。其中一些在服务器上丢失 - 由所有者删除。

如果未加载（损坏）图像，我想显示占位符 - 标准图像，表示图像丢失。

我不想重写所有模板，因此我无法将onError属性添加到每个图像标记，因此我无法使用此解决方案：jQuery/JavaScript to replace broken images

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

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

Answer 2

对于在apache上运行的65％的网站（http://w3techs.com/technologies/details/ws-apache/all/all）：

缺少图片是服务器问题，如果您可以在图片文件夹中上传.htaccess，则可以在服务器上修复图片文件夹中的.htaccess

ErrorDocument 404 /PATH/TO/IMAGE/FOLDER/placeholder.png

客户端将是404免费+ js有效载荷将更少=您的页面将加载更快

或从root .htaccess，如果您可以在根文件夹中上传/编辑.htaccess，您可以：

  <FilesMatch ".(jpg|png|gif)$">
    ErrorDocument 404 /PATH/TO/IMAGE/FOLDER/placeholder.png
  </FilesMatch>

（第二个解决方案归功于https://stackoverflow.com/a/10803705/1061871）

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

2 个答案: