showing loading image still shows "browser loading image" icon

Question

i have this code running to load my images all asynch and show a ajax loading image until the real image is downloaded.

 $('img.loadable-image').css('background', 'transparent url(/images/ajax-loader1.gif) no-repeat center center')
$('img.loadable-image').load(function() { $(this).css('background', ''); });

this works in that it shows my ajax loading icon until the images is downloaded but it also shows the background as well

here is my original image html:

<img class="loadable-image" src="mysite.com/validimage.jpg" border="0" height="50" width="50">

here is a screenshot of what i get:

as you can see on the left, you see the little ajax loader but also see the missing image square around it.

any suggestions?

Answer 1

See http://www.w3.org/TR/REC-html40/struct/objects.html#h-13.2, which defines that an <img> tag must have the src attribute.

The missing square will be due the src attribute of the <img> tag. If it's not set to a valid image URL, you'll get the "broken image" frame. Set the src instead of the background (or set it to a transparent image) or change it to a <span> element instead of an <img> element.

Not valid, no src attribute == "broken image" icon:

<img alt="" style="width:50px; height:50px; background-image:url(bg.gif)" />

valid, with src attribute:

<img alt="" src="transparent.gif" 
     style="width:50px; height:50px; background-image:url(bg.gif)" />

---

After your edit, I can see you're doing it correctly, the problem is the image taking a long time to download. In that case, you have a few options:

• If you have control over the images, make them load progressively (save GIF/PNG as interlaced, JPEG as progressive).
• If you don't have control over the images, wrap the img hidden in a span, apply the background image to the span element and show the image when the load event fires.

Ex:

<span class="loadable-image-container">
    <img class="loadable-image" src="mysite.com/validimage.jpg" 
        border="0" height="50" width="50">
</span>

jQuery, something like:

$('img.loadable-image-container')
    .css('background', 
      'transparent url(/images/ajax-loader1.gif) no-repeat center center')
    .children().css('visibility', 'hidden');

$('img.loadable-image').load(function() { 
    $(this)
        .css('visibility', 'visible')
        .parent().css('background', ''); 
});