Question

I have a html page and whilst it’s waiting for data from the server it should display an animated gif image to show that it is waiting.

This is the code:

 $("#display").append('<img src="/templates/image.gif alt="red" width="30" height="30" " />');

This is the html:

 <div style="margin:0 auto;" id="display"></div>

The animated gif was taken from the gif generator at : http://www.ajaxload.info/ and put into the relevant directory.

But instead all that is displayed is a ‘broken picture icon’ in Google chrome and nothing is displayed at all in Firefox. It seems like it cannot access the .gif file as I get a 404 error when I try and access the file from the server. Eventhough I can see it in the directory in my workspace.

I cannot see what the problem might me.

Thanks

Answer 1

Firefox hides ‘broken images’ and Chrome/internet explorer show a broken image placeholder.

Seems like you didnt close the src attribute.

$("#display").append('<img src="/templates/image.gif alt="red" width="30" height="30" " />');

should be

$("#display").append('<img src="/templates/image.gif" alt="red" width="30" height="30" />');