Question

我有一个网页，其中包含数以万计的图片。有时图像不可用，因此客户端浏览器中会显示损坏的图像。

损坏的图片采用以下网址格式： www.domain.com/t.php?src=p/dd5e5b08_1.jpg 。

如何使用jQuery获取图像集，将其过滤为损坏的图像，然后替换src？

以下不起作用：

位于结束</head>代码

之上

<script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>

位于结束标记

之上

<script type="text/javascript">
    $(window).load(function() {
        $("img").each(function(){
            var image = $(this);
            if(image.context.naturalWidth == 0 || image.readyState == 'uninitialized'){
                $(image).unbind("error").attr("src", "/images/no_image.png");
            }
        });
    });
</script>

Answer 1

此代码可能对您有所帮助：

function imgError(image){
    image.onerror = "";
    image.src = "/images/noimage.gif";
    return true;
}

<img src="image.png" onerror="imgError(this);"/>

尝试CodeFiddle Demo

Answer 2

这可以帮助您：

$(document).ready(function () {
    let images = ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg'];
    let image_html = '';
    $.each(images, (key, value) => {
        image_html += '<img src="img/' + value + '"/>';
    });
    $('#imgcontainer').html(image_html);
    $('img').on('error', function () {
        $(this).replaceWith('<img src="img/no-photo.jpg"/>');
    });
});

用jQuery或JavaScript替换损坏的图像

2 个答案: