Replace broken images with jquery

Question

I am trying to replace images that are not found, or that have width or height 1px. I managed to do this in PHP with this:

$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';
  }

I tried this code in 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)
})

which can be found in a fiddle here http://jsfiddle.net/WMpSy/ but I am a noob in jQuery, please help me this. It's much appreciated.

@jfriend00 Problem is that the script from there it detects the width of the width attribute instead detecting the real image width. I am trying to detect the real width of the image. For example if I have on the image tags width and height specified, I don't want that detected, I want the real width of the data-original value image detected. (data-original is from the lazy load plugin that I am using) — Adrian, May 10 '14 at 18:01

jfriend00 · Accepted Answer · 2014-05-10T18:16:38.293

5

If you're trying to do this via javascript without changing your HTML, then you can do this:

$(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";
            });

        }
    });
});

If you need support in IE8 (which doesn't have naturalHeight and naturalWidth), there are work-arounds described here.

edited May 10 '14 at 18:16

answered May 10 '14 at 18:00

jfriend00

683,504
96
985
979

Sorry of the jquery noob question but could you give me an example on what to add on the // undersize image here, // set new .src here. I kind of need to get my php translated in jquery. From what I see here this should be what I need. Thanks again for helping – Adrian May 10 '14 at 18:05
@user3467855 - what do you want to do to the undersize image? – jfriend00 May 10 '14 at 18:06
replace it with uploads/no-img.jpg on the attribute data-original. – Adrian May 10 '14 at 18:07
@user3467855 - huh? Do you want to change the image `.src` to `"uploads/no-img.jpg"` or do you want to read something from an attribute and use that? Which one? If the attribute, please me more specific about what you want to do with an attribute. – jfriend00 May 10 '14 at 18:08
Have a look at the image from here: http://jsfiddle.net/WMpSy/53/, I am using lazy load plugin, therefor the src attribute is no more, instead I replaced it with data-original attribute. And in that attribute I want to add data-original="uploads/no-img.jpg". – Adrian May 10 '14 at 18:11
@user3467855 - I don't understand. When the image doesn't load or is under size, what EXACTLY do you want to do to it? Please describe in words what steps you want to take. This is a frustrating question to be helping with because you keep adding more and more requirements that are NOT in your original question. – jfriend00 May 10 '14 at 18:14
I want it to load 'upload/no-img.jpeg'. – Adrian May 10 '14 at 18:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/52442/discussion-between-user3467855-and-jfriend00) – Adrian May 10 '14 at 18:16
@user3467855 - OK, I added setting the image to 'upload/no-img.jpeg' to my answer when there's an error. – jfriend00 May 10 '14 at 18:17
Yes, this is what I wanted. – Adrian May 10 '14 at 18:22

php-dev · Answer 2 · 2014-05-10T18:03:37.540

1

Simply, iterate over your images and check for their heights

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

edited May 10 '14 at 18:03

answered May 10 '14 at 17:55

php-dev

6,998
4
24
38

1

All images are not necessarily loaded at document.ready time. – jfriend00 May 10 '14 at 17:56
@jfriend00 Changed to window.load event. Thanks – php-dev May 10 '14 at 18:04
The disadvantage of this approach is that this waits until all images are loaded before processing any of them. So a broken image will potentially be broken for awhile. – jfriend00 May 10 '14 at 18:10

score 1 · Answer 3 · answered May 10 '14 at 19:17

Here is the valid jquery code that can solve your problem. please take care of .ready and .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');
    });
}); });

Here is the working example on http://jsfiddle.net/designs5/86Tp2/

Replace broken images with jquery

3 Answers3

Linked