用jquery替换损坏的图像[重复]答案

【问题标题】：Replace broken images with jquery [duplicate]用jquery替换损坏的图像[重复]
【发布时间】：2014-06-28 08:44:42
【问题描述】：

我正在尝试替换未找到或宽度或高度为 1 像素的图像。我设法在 PHP 中做到了这一点：

$imgName = $resultList->IMAGE1; // ex http://www.domain.com/image.png
  if (@file_get_contents($imgName) && $imgName !== 'h') {
    // detects the image size (NOT based on width and height attributes)
$imgNamearray = getimagesize($imgName); 
$size = $imgNamearray[3];
    if ($size == 'width="1" height="1"') {
      $imgName = $base_path . 'uploads/no-img.jpg';
    }
  } else {
    $imgName = $base_path . 'uploads/no-img.jpg';
  }

我在 jQuery 中尝试了这段代码：

$('body').append('<div id="init"><img id="myimg" src="http://www.google.co.uk/intl/en_com/images/srpr/logo1w.png" /></div>');
$('#init').hide();

$('#myimg').bind("load",function(){
    alert(this.height)
})

可以在http://jsfiddle.net/WMpSy/ 的小提琴中找到，但我是 jQuery 的菜鸟，请帮帮我。非常感谢。

【问题讨论】：

是的，但它不检测 1*1 像素的图像。
@jfriend00 问题是脚本从那里检测宽度属性的宽度，而不是检测实际图像宽度。我正在尝试检测图像的实际宽度。例如，如果我在图像标签上指定了宽度和高度，我不希望检测到它，我希望检测到数据原始值图像的真实宽度。（原始数据来自我正在使用的延迟加载插件）

标签： javascript php jquery

【解决方案1】：

如果您尝试通过 javascript 执行此操作而不更改您的 HTML，那么您可以这样做：

$(document).ready(function() {
    function checkImg(img) {
        if (img.naturalHeight <= 1 && img.naturalWidth <= 1) {
            // undersize image here
            img.src = "upload/no-img.jpeg";
        }
    }

    $("img").each(function() {
        // if image already loaded, we can check it's height now
        if (this.complete) {
            checkImg(this);
        } else {
            // if not loaded yet, then set load and error handlers
            $(this).load(function() {
                checkImg(this);
            }).error(function() {
                // img did not load correctly
                // set new .src here
                this.src = "upload/no-img.jpeg";
            });

        }
    });
});

如果您需要 IE8 中的支持（没有 naturalHeight 和 naturalWidth），可以使用here 描述的解决方法。

【讨论】：

对不起 jquery noob 问题，但你能给我一个例子，说明在 // 尺寸过小的图像上添加什么， // 在此处设置新的 .src。我有点需要在 jquery 中翻译我的 php。从我在这里看到的应该是我需要的。再次感谢您的帮助
@user3467855 - 你想对尺寸过小的图片做什么？
在属性 data-original 上将其替换为 uploads/no-img.jpg。
@user3467855 - 嗯？您想将图像.src 更改为"uploads/no-img.jpg" 还是想从属性中读取某些内容并使用它？哪一个？如果是属性，请让我更具体地说明您想对属性做什么。
看一下这里的图片：jsfiddle.net/WMpSy/53，我正在使用延迟加载插件，因此不再使用 src 属性，而是将其替换为 data-original 属性。在该属性中，我想添加 data-original="uploads/no-img.jpg"。

【解决方案2】：

简单地，遍历您的图像并检查它们的高度

$(window).load(function(){
    $('img').each(function(){
        var height = $(this).height();
        if(height <= 1) {
            $(this).attr('src', '/your-replacement-image-path');
        }
    });
});

【讨论】：

并非所有图像都必须在 document.ready 时加载。
@jfriend00 更改为 window.load 事件。谢谢
这种方法的缺点是它会等到所有图像都加载完毕后再处理任何图像。因此，损坏的图像可能会损坏一段时间。

【解决方案3】：

这是可以解决您的问题的有效 jquery 代码。请注意 .ready 和 .on load

$('img').each(function () {
var Image = $(this);
$(window).on('load', function () {
    if (Image.width() <= 1 || Image.height() <= 1) {
        Image.attr('src', '/ImagePath');
    }
});
$(document).ready(function () {
    Image.error(function () {
        Image.attr('src', '/ImagePath');
    });
}); });

这是http://jsfiddle.net/designs5/86Tp2/上的工作示例

【讨论】：