jQuery/JavaScript来替换破碎的图像

Question

我有一个包含一堆图像的网页.有时图像不可用,因此在客户端的浏览器中显示损坏的图像.

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

---

- 我认为使用jQuery更容易做到这一点,但结果却更容易使用纯粹的JavaScript解决方案,即Prestaul提供的解决方案.

Answer 1

处理onError图像事件以使用JavaScript重新分配其源:

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

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

或者没有JavaScript功能:

<img src="image.png" onError="this.onerror=null;this.src='/images/noimage.gif';" />

以下兼容性表列出了支持错误工具的浏览器:

http://www.quirksmode.org/dom/events/error.html

Answer 2

我使用内置error处理程序:

$("img").error(function () {
    $(this).unbind("error").attr("src", "broken.gif");
});

编辑:该error()方法在1.8及更高版本中已弃用.相反,你应该使用.on("error"):

$("img").on("error", function () {
    $(this).attr("src", "broken.gif");
});

Answer 3

如果像我这样的人尝试将error事件附加到动态HTML img标记,我想指出,有一个问题:

显然,img错误事件在大多数浏览器中都不会出现泡沫,这与标准所说的相反.

所以,像下面这样的东西将不起作用:

$(document).on('error', 'img', function () { ... })

希望这对其他人有所帮助.我希望我在这个帖子中看到过这个.但是,我没有.所以,我正在添加它

Answer 4

这是一个独立的解决方案:

$(window).load(function() {
  $('img').each(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
      // image was broken, replace with your new image
      this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
    }
  });
});

Answer 5

我相信这就是你所追求的:jQuery.Preload

这是演示中的示例代码,您指定了加载和未找到的图像,并且您已全部设置:

$('#images img').preload({
    placeholder:'placeholder.jpg',
    notFound:'notfound.jpg'
});

Answer 6

$(window).bind('load', function() {
$('img').each(function() {
    if((typeof this.naturalWidth != "undefined" &&
        this.naturalWidth == 0 ) 
        || this.readyState == 'uninitialized' ) {
        $(this).attr('src', 'missing.jpg');
    }
}); })

资料来源:http://www.developria.com/2009/03/jquery-quickie---broken-images.html

Answer 7

虽然OP希望取代SRC,但我确信许多人在讨论这个问题时可能只想隐藏破碎的图像,在这种情况下,这个简单的解决方案对我来说非常有用:

<img src="img.jpg" onerror="this.style.display='none';" />

Answer 8

这是一种快速而又脏的方法来替换所有损坏的图像,并且无需更改HTML代码;)

codepen示例

    $("img").each(function(){
        var img = $(this);
        var image = new Image();
        image.src = $(img).attr("src");
        var no_image = "https://dummyimage.com/100x100/7080b5/000000&text=No+image";
        if (image.naturalWidth == 0 || image.readyState == 'uninitialized'){
            $(img).unbind("error").attr("src", no_image).css({
                height: $(img).css("height"),
                width: $(img).css("width"),
            });
        }
  });

Answer 9

我找不到适合我需要的脚本,所以我做了一个递归函数来检查损坏的图像,并尝试每四秒重新加载一次,直到它们被修复.

我把它限制为10次尝试,好像它没有被加载,然后图像可能不存在于服务器上,并且该函数将进入无限循环.我还在测试.随意调整它:)

var retries = 0;
$.imgReload = function() {
    var loaded = 1;

    $("img").each(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {

            var src = $(this).attr("src");
            var date = new Date();
            $(this).attr("src", src + "?v=" + date.getTime()); //slightly change url to prevent loading from cache
            loaded =0;
        }
    });

    retries +=1;
    if (retries < 10) { // If after 10 retries error images are not fixed maybe because they
                        // are not present on server, the recursion will break the loop
        if (loaded == 0) {
            setTimeout('$.imgReload()',4000); // I think 4 seconds is enough to load a small image (<50k) from a slow server
        }
        // All images have been loaded
        else {
            // alert("images loaded");
        }
    }
    // If error images cannot be loaded  after 10 retries
    else {
        // alert("recursion exceeded");
    }
}

jQuery(document).ready(function() {
    setTimeout('$.imgReload()',5000);
});

Answer 10

这是一种糟糕的技术,但它几乎得到了保证:

<img ...  onerror="this.parentNode.removeChild(this);">

Answer 11

这多年来一直让我感到沮丧。我的 CSS 修复在img. 当动态图像src未加载到前台时，占位符在 的img背景上可见。如果您的图像具有默认尺寸（例如height、min-height和width/或min-width），则此方法有效。

您会看到损坏的图像图标，但这是一个改进。测试到IE9成功。iOS Safari 和 Chrome 甚至不显示损坏的图标。

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

添加一点动画，以便src有时间加载而不会出现背景闪烁。Chrome 在后台平滑淡出，但桌面版 Safari 却不然。

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  animation: fadein 1s;                     
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
}

.dynamicContainer img {
  background: url('/images/placeholder.png');
  background-size: contain;
  animation: fadein 1s;                     
}

@keyframes fadein {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}

Answer 12

这是JavaScript,应该是跨浏览器兼容的,并且没有丑陋的标记onerror="":

var sPathToDefaultImg = 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
    validateImage = function( domImg ) {
        oImg = new Image();
        oImg.onerror = function() {
            domImg.src = sPathToDefaultImg;
        };
        oImg.src = domImg.src;
    },
    aImg = document.getElementsByTagName( 'IMG' ),
    i = aImg.length;

while ( i-- ) {
    validateImage( aImg[i] );
}

CODEPEN:

Answer 13

如果您插入了imgwith innerHTML，例如：$("div").innerHTML = <img src="wrong-uri">，如果失败，您可以加载另一个图像，例如：

<script>
    function imgError(img) {
        img.error="";
        img.src="valid-uri";
    }
</script>

<img src="wrong-uri" onerror="javascript:imgError(this)">

为什么javascript: _需要？因为通过脚本标签注入 DOM 的脚本在innerHTML注入时不会运行，所以你必须明确。

Answer 14

您可以使用GitHub自己的提取:

前端:https://github.com/github/fetch
或Backend,Node.js版本:https://github.com/bitinn/node-fetch

fetch(url)
  .then(function(res) {
    if (res.status == '200') {
      return image;
    } else {
      return placeholder;
    }
  }

编辑:这种方法将取代XHR,据说已经在Chrome中.对于将来阅读此内容的任何人,您可能不需要包含上述库.