I am running a slideshow on Ubuntu 12.04.1 that loads the images (slide1.jpg, slide2.jpg, slide3.jpg.., slide5.jpg) using the Javascript and styles as below:

document.getElementById('slide_area').className='slide'+step;

.slide1{background-image: url(../upload/slide1.jpg)}
.slide2{background-image: url(../upload/slide2.jpg)}
.slide3{background-image: url(../upload/slide3.jpg)}
.slide4{background-image: url(../upload/slide4.jpg)}
.slide5{background-image: url(../upload/slide5.jpg)}

When I change the images names (show1.jpg, show2.jpg, show3.jpg.., show5.jpg) and also change the style as below:

.slide1{background-image: url(../upload/show1.jpg)}
.slide2{background-image: url(../upload/show2.jpg)}
.slide3{background-image: url(../upload/show3.jpg)}
.slide4{background-image: url(../upload/show4.jpg)}
.slide5{background-image: url(../upload/show5.jpg)}

And open the network section on Chrome, I see the server is calling the new name and old name for images!

I added the header in the index.php:

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache"); 

Nothing worked out with me and the slideshow doesn't work properly when I change the name of images even when clearing the browser cache as I load images sequentially (one by one) depending on imageObject.complete property! But without changing the name everything is going perfect and the images are loaded smoothly!

Thank you for your help!