5

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

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

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

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

4

2 回答 2

7

是的，因为您的标签中有 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 );
}
于 2013-11-04T17:14:31.570 回答
2

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

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

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

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

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

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

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

于 2013-11-04T17:52:48.767 回答