Images breaking on page refresh?

Question

I am pulling data from a database with Ajax and dynamically populating a div tag with image elements. The image file name corresponds to the data in the database.

For instance if there was something in the database called 'foo', I have an item called 'img/foo.jpg'

My javascript pulls the data and creates a an image with the src if 'img/foo.jpg' sets the class and then writes it in to the correct div.

For the most part this works as intended, but occasionally on a refresh (I have it querying the database, clearing all divs, and rewriting the nodes every 30 seconds), occasionally some of the images will break/not load. There's no rhyme or reason to which one it is, sometimes it happens to none, and sometimes to several.

If you right click -> show image, manually refresh, or wait for it to pull the data again, it displays the image as intended. Therefore, I know data is being pulled and written properly, and it just seems to be failing to load the image.

Does anyone know why or how to address this issue?

Answer 1

Try it in Firefox with the Firebug add-on, with the Net panel enabled and you might be able to see why the fetches for the images are failing.