1

Here's the situation: I need to change the background image of a div in a page at a given time. The following code does exactly that, and also fades the pictures in and out. Problem is, I need to change the images in the directory with frequency. The names never change, but the pictures do. How can I force the browser to refresh content? It won't refresh images even if I manually press f5.

<html>
<head>
    <meta charset="UTF-8">
    <title>Esquerdo - Monitores BI</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.5.2.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
        $('img').hide();
        function test() {
            $("#container img").first().appendTo('#container').fadeOut(2000);
            $("#container img").first().fadeIn(2000);

            setTimeout(test, 7000);
        }
            test();
        });
    </script>

    <link rel="stylesheet" type="text/css" href="slidestyle2.css">
</head>
<body>
    <div id="container">
        <img src="vehicles/kicks.jpg" />
        <img src="vehicles/gtr.jpg" />
        <img src="vehicles/sentra.jpg" />
    </div>
</body>

I've searched a lot for a solution, but since I know nothing about jquery, javascript etc and all solutions I've found worked for very different codes, I couldn't adapt anything to my needs. All I know is that the browser keeps the original content of a file with a certain name, so you need to change the name of the file inside the code, make it be always unique. But how can I do that if I'm writing the file name in html?

I'd really appreciate any help.

SamRosignoli
  • 29
  • 1
  • 2
  • 6
  • If you want to do it programically you need to add some sort of unique querystring to the url of the image so it forces the browser to re-download everytime [see this](https://stackoverflow.com/questions/728616/disable-cache-for-some-images), if you just want to look at the new image, then you need to do a hard refresh (ctrl + f5) to foirce the cached files to redownload – Pete Oct 26 '17 at 13:16
  • What your describing is called [caching](https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching) and you can control how the browser caches certain files with the [`cache-control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) header – George Oct 26 '17 at 13:17

1 Answers1

4

Add a random value at the end of the URL :

$("#container img").first().attr( "src", "vehicles/kicks.jpg?" + Math.random() )

That'll force the browser to refetch a fresh copy of the image.

Jeremy Thille
  • 21,780
  • 7
  • 36
  • 54
  • great ! first to hear that – artgb Oct 26 '17 at 13:20
  • I would probably use some sort of datetime stamp rather than math random as there is a very slim chance the random number could be one already used where as the date time will always increment – Pete Oct 26 '17 at 13:21
  • Fair point. But I have just tried this snippet in my console :`for(i=0; i<30; i++) { console.log(new Date().getTime())}`, and it executes so fast that it outputs the same timestamp 21 times, then 9 times the next one ... Any suggestion? `Math.random() + new Date().getTime()` maybe? :) – Jeremy Thille Oct 26 '17 at 13:24
  • @JeremyThille where exactly do I put that? Tried many ways and nothing worked well. Do I need to change/delete another line? – SamRosignoli Oct 26 '17 at 14:11
  • Well, put it whenever you want to set the image's `src` attribute. It's just setting the image's source, that's it – Jeremy Thille Oct 26 '17 at 14:19