Question

I would like to dynamically insert an image in a webpage using javascript. The easiest way of course is just to update the ‘src’ tag of an element. However, the image is actually a dynamically generated PNG, and it takes about 15sec to generate it every time. If I just update the ‘img’ tag, I am afraid impatient users will think the url is dead and leave the page before it displays, therefore I would like to display a loader.

In order to be able to display a loader I have to download the image through Ajax, and then insert in in the document. Is this possible? I tried to first do an Ajax request, and then when it succeeds update the img src tag hoping that browsers would be smart enough not to re-downoad the image, but apparently this is not the case.

Is there any workaround to have control over the http request of the img without introducing new server code?

Answer 1

When the page is loaded you could show some dummy image which will represent the loading progress:

<img src="loader.gif" id="myimg" />

and then replace it with the actual dynamic image:

$(function() {
    $('#myimg').load(function() {
        $(this).unbind('load');
        this.src = '/script/dynamicimage';
    });
});