Question

I’m building a site that dynamically loads content, replacing images based on the results of the content. While the browser loads the images, however, the alt attribute is displayed, often in an unsightly manner. I’d like to keep the alt attribute if possible, but the image should display without flashing the ‘alt’ attribute while the browser downloads the image. Has anyone run into this problem and found a solution?

I’m using jQuery.

Answer 1

You could “preload” your image and only once it’s loaded swap the src.

var tmp = new Image();
tmp.src = "yourimage.png";
tmp.onload = function() {
    $("#actual_image").prop("src", tmp .src);
};