Hiding bad images or bad thumbnails

how to hid bad images or thumb

[guod]

On our website, we have many products. On the product pages is a picture of the item and below the pictures are UP TO 4 thumbnails. Now when we have an image with only 2 thumbnails, there will be 2 red X boxes next to the good images. This looks very unprofessional and we want to get rid of it. I found this script:

<script type="text/javascript"> 
function failsafeImg(){
var badImg = new Image();
badImg.src = 'graphics\/myimg.gif';
for(var i=0;i<document.images.length;i++){
var cpyImg = new Image();
cpyImg.src = document.images[i].src;
if(!cpyImg.width){
document.images[i].src = badImg.src;
}
}
}
onload = failsafeImg; 
</script>

It works in internet explorer and firefox, but webkit browsers go nuts. Either the whole image loads and then goes away into a blue question mark box or the main product image will be visible, with the thumbnails hidden. Obviously the code is not very compatible with webkit, but i was wondering if someone could tell me how to make it compatible or another way to do what I am trying.

[daveVk]

That looks over complex to me, try

function failsafeImg(){
for(var i=0;i<document.images.length;i++){
if(!document.images[ i ].width){
document.images[ i ].src = 'graphics\/myimg.gif';
}
}
}

I don't know if it fixes the issue, but less to go wrong.

[guod]

thanks for the reply. sadly, that code did not work. it was as if the code was not there and even FF and IE started to show the bad thumbs

[Fotiman]

Ideally, you would want to change the code server side to not produce links to images that didn't exist.

However, I just tried your code in Chrome 6 and Safari 5.0 with no problems at all. Granted, my test case was pretty light (only 3 images total), but it worked just fine.

[guod]

Well I would love to do it without JS...If I remove the JS, the crazy thing is in Safari, Chrome and IE all work. Then only FIREFOX will show the bad img thumbs...here is the code. Say a product has 1 picture, 3 bad thumbnails will show up next to it, but in Webkit and IE the bad 3 do not appear..only in FF

 <tr>
       <td align="center" class="price-info">
       <font face="Verdana">
       <a rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image1]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(1);return false;" href="[image1]">
       <img src="thumbnail.asp?file=[image1]&maxx=65&maxy=0" border="0" name="pimage1" style="border: 1px solid #CCCCCC"onerror="this.style.display='none'"></a>
       <a rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image2]&maxx=[image_medium_w]&maxy=0" onclick="javascript:image_click(2);return false;" href="[image2]">
       <img src="thumbnail.asp?file=[image2]&maxx=65&maxy=0" border="0" name="pimage2" style="border: 1px solid #CCCCCC"onerror="this.style.display='none'"></a>
       <a rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image3]&maxx=[image_medium_w]&maxy=[image_medium_h" onclick="javascript:image_click(3);return false;" href="[image3]">
       <img border="0" src="thumbnail.asp?file=[image3]&maxx=65&maxy=0" name="pimage3" style="border: 1px solid #CCCCCC"onerror="this.style.display='none'"></a>
       <a rel="thumb-id:listing_main_image_link" rev="thumbnail.asp?file=[image4]&maxx=[image_medium_w]&maxy=[image_medium_h" onerror="this.style.display='none'" onclick="javascript:image_click(4);return false;" href="[image4]">
       <img border="0" src="thumbnail.asp?file=[image4]&maxx=65&maxy=0" name="pimage4" style="border: 1px solid #CCCCCC"onerror="this.style.display='none'"></a></font></td>
     </tr>

[Fotiman]

onerror="this.style.display='none'"

That seems to prevent the images from appearing at all. Also, you're missing a space before the onerror.

Also, I just tried the above code in Chrome and Firefox, and none of the missing images show up at all because of that onerror.

[guod]

well the weird thing is, the images do show up but only in FF with that code. in chrome, safari and IE all of the bad thumbs are hidden.

Do you think that by added a space to #CCCCCC"onerror=" to make it #CCCCCC" onerror=" would change anything in FF?

[Fotiman]

I don't know... like I said, the images don't show up in FF for me, even without the space. I would add the space anyway.

[daveVk]

Try changing ( in original code )
!cpyImg.width
to
!cpyImg.complete

OR ( in my prior post )
!document.images[ i ].width
to
!document.images[ i ].complete

While not defined by W3C, seems to be well supported see

www.w3schools.com/jsref/prop_img_complete.asp

[guod]

dang. i dont get this. I tried your new code and again, 3 of the 4 browsers work, but FF just keeps showing those bad thumbs

[daveVk]

This link [sajithmr.me...]

gives the following code

function IsImageOk(img) {
// During the onload event, IE correctly identifies
any images that
// weren’t downloaded as not complete. Others should too. Gecko-based
// browsers act like NS4 in that they report this incorrectly.
if (!img.complete) {
return false;
}

// However, they do have two very useful properties:
naturalWidth and
// naturalHeight. These give the true size of the image. If it failed
// to load, either of these should be zero.
if (typeof img.naturalWidth
!= “undefined” && img.naturalWidth
== 0) {
return false;
}

// No other way of checking: assume it’s ok.
return true;
}

[Fotiman]

Update: The reason the onError handlers aren't working in Firefox is because the response from the image URL is returning a 200 OK instead of a 404 Not Found for the images. You can see from the example above that the thumbnails are being generated from an ASP page:

thumbnail.asp?file=[image2]&maxx=65&maxy=0

If thumbnail.asp is modified to return a 404 when the file doesn't exist, then Firefox might correctly execute the onError handler.

[daveVk]

If thumbnail.asp is modified to return a 404 when the file doesn't exist, then Firefox might correctly execute the onError handler.

If modifying thumbnail.asp is an option, have it temp redirect to blank image may be better option.

[guod]

for some reason, I cant download thumbnail.asp from my server..