Good day to all.
The problem arose suddenly!
The girl changes the pictures on the banner via FTP, but browsers do not change it until you click FE-5
But after all, not all users will do this, especially since the target search engines are women and girls.
Registered

<meta http-equiv="Pragma" content="no-cache">
But it does not help. (it seems that only in Chrom, it seems, it works.) Pictures from banner banner, an example can be seen here :
What other way out of this situation is?
Or maybe some script hang on bannerokrutilku?

    3 answers 3

    The meta tag will not help you. Add random text as query_string for all images.

     <img src='/path-to-image/image.png?v=tAbd4l' />

    A javascript function to generate a string of 5 random characters:

     function makeid() { var text = "", possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", p_length = possible.length; for (var i = 0; i < 5; ++i) text += possible.charAt(Math.floor(Math.random() * p_length)); return text; }

    Usage example

    html

     <div class="slider"> <img src="http://placehold.it/100/ff944e/000000.png" /> <img src="http://placehold.it/100/4e94ff/000000.png" /> </div>

    javascript

     var slider = document.querySelector('.slider'), slides = document.querySelectorAll('.slider img'), slides_total = slides.length; for (var i = 0; i < slides_total; ++i) { slides[i].src += '?v=' + makeid(); }

    Addition

    So that the image just loaded after javascript do so .
    Essence: at first we load transparent gif 1x1 pixels, and then with a script we replace it with a real picture.

    html

     <!-- R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 ΠŸΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΉ gif 1x1 пиксСлСй --> <div class="slider"> <img src="data:image/gif;base64,ΠΊΠΎΠ΄_ΠΈΠ·_коммСнтария_Π²Ρ‹ΡˆΠ΅" data-src="http://placehold.it/100/ff944e/000000.png" /> <img src="data:image/gif;base64,ΠΊΠΎΠ΄_ΠΈΠ·_коммСнтария_Π²Ρ‹ΡˆΠ΅" data-src="http://placehold.it/100/4e94ff/000000.png" /> </div>

    javascript

     var slider = document.querySelector('.slider'), slides = document.querySelectorAll('.slider img'), slides_total = slides.length; for (var i = 0; i < slides_total; ++i) { var img = slides[i]; slides[i].src = img.getAttribute('data-src') + '?v=' + makeid(); }
    • one
      @VenZell thanks. Answer accepted. But I decided out of old habit through PHP: <img src="pictures.jpg?=<?php echo rand(0, 10); ?>" /> Probably PHP with a large attendance of the project in this version is bad? - I_CaR
    • @I_CaR, you forgot to indicate what your site is on, so I gave a javascript code as an example of a solution. - VenZell
    • Is it always definitely before JS comes true, before the pictures are loaded, or is it possible that old pictures will be loaded, then DOM ready, and only then will the pictures be replaced with the corrected ones? - Sergiks
    • one
      Is there a way around this. Updated the answer. - VenZell

    Your nginx web server is configured to display pictures with headers

     Cache-Control: max-age=2592000 Expires: Sat, 08 Mar 2014 07:34:48 GMT

    To prevent banners from being stored in the browser's cache, you must either assign a random GET argument to the request for the request, as suggested by @VenZell , or configure nginx to send images from the banner folder with a short caching time, for example. 5 minutes is enough that within one visit to the site banners are requested only once, and at the same time, no more than 5 minutes have passed before everyone sees the new loaded banner:

     location /js/banner-slider { expires 5m; }

      There is an option to prohibit the caching of images by issuing certain headers to them via a web server.

      For example: http://www.askapache.com/htaccess/using-http-headers-with-htaccess.html#100_Prevent_Files_cached

      (in your case, the regular expression should be different)