Question

我正在尝试替换未找到或宽度或高度为1px的图像。我设法用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的菜鸟，请帮助我。非常感谢。

Answer 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中支持（它没有自然高度和自然宽度），有一些解决方法here。

Answer 2

简单地说，迭代你的图像并检查它们的高度

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

Answer 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/

上的工作示例

用jquery替换损坏的图像

3 个答案: