Question

I have some problems using wamp, when i edit (in an external program) an image i load with javascript it doesn’t update on the webserver.

I am using this code to load the images as the background of h2 tags

$('div.drawer h2').each(function(index)
{
    $(this).css("background-image", "url(./images/" + $(this).text() + ".png)")
});

This loads an image with the text of the h2 +.png from the images folder

However it doesn’t reload the image in the cache so if i edit the source image it doesn’t change on the webpage.

If i load the image in the CSS (with the background-image variable) it loads and updates fine.

How can this behavior be fixed? and is it expected?

Answer 1

the image is probably cached in your web browser, try to hit ctrl+F5 to reload it.

Or you can try ctrl+delete and delete whole cache of the browser to see if this is your problem.

If you dynamically load the image in javascript, you can add ?randomnumber after the image name.

Like http://yourserver/imageName.jpg?1234 then the URL will be unique for each request thus will not hit your browser’s cache.