1

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!

moderns
  • 650
  • 10
  • 23

3 Answers3

1

Pressing Ctrl+F5 might solve your issue as browsers tend to cache static files like CSS / JavaScript and images.

SidOfc
  • 4,552
  • 3
  • 27
  • 50
  • Thanks but my users will not press Ctrl+F5! Any other solution to make it working on my users end? – moderns Oct 22 '13 at 17:01
  • 1
    You could clear the cache using HTML: http://stackoverflow.com/questions/1922910/force-browser-to-clear-cache - however this would then be executed on every page load. If it's a website you're working on you should be working locally until everything works, then upload it to the so users won't have any nasty experiences. – SidOfc Oct 22 '13 at 17:03
  • But I need the browser to load the images first load, then for next visits, I need the images to load from the cache! Any workaround? I work on a real server now and need to go live with the website very soon. Any suggestions? – moderns Oct 22 '13 at 17:06
  • You could set a cache expiry in which the cache will clear every X days (in seconds). This will benefit you because if you make minor ajustments, people will only notice them after their cache has been refreshed. However your best option for now is not to use cache and hope that most users do not use Firefox, due to the fact that Firefox is horrific when dealing with cache. – SidOfc Oct 22 '13 at 17:12
  • Thanks! Please could you tell me where to add it and what code to add to make the cache expire after X days? I am really confused. – moderns Oct 22 '13 at 17:20
  • 1
    Your best option would be to do this one time, then remove it when you are sure everyone visited the page (out of the people that already visited the page), you would add these: ` ` to the `` above all your scripts to make sure it refreshes everything. be sure to set the Expires header content to match a date that has yet to come. PS: do not forget to upvote / accept any answer here if you found it helpful! – SidOfc Oct 22 '13 at 17:26
  • Thanks Sidney! Ctrl+F5 didn't work! Could you please tell me where to put the Expires header content you mentioned? And how it looks like? I will upvote your answer if it works sure! – moderns Oct 22 '13 at 17:30
  • I am now getting 304 Status (Not modified) and unlimited network requests. Any help? @Sidney – moderns Oct 22 '13 at 21:26
  • 1
    Apologies for the late response, 304 not modified should be correct for the page itself, did you check wether the images were to? **PS** The tags above should be placed in the `` tag of your document as mentioned above :) – SidOfc Oct 23 '13 at 06:59
  • Thanks Sidney! Appreciate your kind responses! I will work on all of this and see! I might post another question for the 304 in slideshow :) – moderns Oct 23 '13 at 16:36
0

Your question is not very clear but I think it is the CSS file which is getting cached. Try changing the name of the CSS file instead!

Shamps
  • 488
  • 3
  • 11
  • the slideshow is very simple and I added all details here! I will try changing the whole name of the CSS file and see! Thank you! – moderns Oct 22 '13 at 16:58
  • What do you mean by 'the server is calling the new name and old name for images'? You have to be getting only one request corresponding to each image – Shamps Oct 22 '13 at 17:02
  • I mean I see requests for both names the old and the new, like: Request 1 ... slide1.jpg Request 2 ... show1.jpg Request 3 ... slide2.jpg Request 4 ... show2.jpg . . . . – moderns Oct 22 '13 at 17:03
  • THis is definitely not a cache issue in that case.. post your javascript – Shamps Oct 22 '13 at 17:15
  • Yes! The javascript is simple. I traced the src of images there it and it doesn't load the old names. I need a workaround to solve the cache problem, what to add in PHP (headers) and on apache .htaccess? I notice also that the whole page is cached sometimes when I change index.php with another index.php! Appreciate your help! – moderns Oct 22 '13 at 17:22
0

I have solved this question buy calling the image once from the server instead of calling it each time to view, i.e. I added the images in the document, then added a src to each of one (ONCE - this means to call them once from server), then for each repetition, I show one image and hide the others! Because if I give a src to each image when viewing, then the server might be slow when the server requests to see if the image has been modified last time called (304 response), and this results in delaying the view! Thank you :)

moderns
  • 650
  • 10
  • 23