jQuery setinterval function change css

Question

I want to make a function to change my background <header> every 5 seconds.

On the one hand I have an image that changes every X time, It is generated by a php file:

../bg.php

So I've done that I change the background-image with $("header").css().

Running the script like this:

(function($)
{
    $(document).ready(function()
    {

        var $container = $("header");
        $container.css("background-image", "url(bg.php)");
        var refreshId = setInterval(function()
        {
            $container.css("background-image", "url(bg.php)");
        }, 9000);
    });
})(jQuery);

But does not change by itself.

Maybe a cache issue... Maybe that's why it seems to not be refreshed... Try setting it like `$container.css("background-image", "url('bg.php?a="+Math.random()+"')");` — LcSalazar, Oct 14 '14 at 20:51
FYI you say that it refreshes every 5 seconds, but it is implemented to refresh every 9. — ajndl, Oct 14 '14 at 21:07

Pointy · Answer 1 · 2014-10-14T21:08:28.447

3

This is just a guess, but there's a good chance that the browser is just caching the file. You could add cache control headers on the server, or else add a nonce parameter each time you change the background:

    var counter = 1, refreshId = setInterval(function()
    {
        $container.css("background-image", "url(bg.php?_=" + counter++ + ")");
    }, 9000);

It's probably a good idea to go ahead and set the cache headers properly anyway, just to avoid having client browsers needlessly cache the same image over and over again.

edited Oct 14 '14 at 21:08

answered Oct 14 '14 at 20:51

Pointy

371,531
55
528
584

1

I should have posted as an answer instead of a comment, but I wasn't sure... :) – LcSalazar Oct 14 '14 at 20:51
Well I'm not a PHP programmer so I didn't (and don't) know whether PHP might put cache-prevention headers in by default. – Pointy Oct 14 '14 at 20:53

Mohamad Shiralizadeh · Accepted Answer · 2014-10-14T20:57:50.977

2

Maybe because your browser cache it. place a random number at the end of url:

$container.css("background-image", "url(bg.php?rnd=" +  Math.random() + ")");
var refreshId = setInterval(function()
{
    $container.css("background-image", "url(bg.php?rnd=" +  Math.random() + ")");
}, 9000);

edited Oct 14 '14 at 20:57

answered Oct 14 '14 at 20:52

Mohamad Shiralizadeh

7,153
5
52
78

This would work, but there is a really small, but still present chance that a number could be repeated and the cached image could be accessed... – ajndl Oct 14 '14 at 21:04
set your http cache header to **no-cache** http://stackoverflow.com/questions/49547/making-sure-a-web-page-is-not-cached-across-all-browsers – Mohamad Shiralizadeh Oct 14 '14 at 21:06

Len_D · Answer 3 · 2014-10-14T20:54:19.277

0

window.setInterval(function(){
  /// call your function here
}, 5000);

You probably need to call location.reload(); as well.

edited Oct 14 '14 at 20:54

answered Oct 14 '14 at 20:49

Len_D

1,430
1
12
21

I think it's not working for him because he has it int he document.ready. Declaring it int he window should work for him. – Len_D Oct 14 '14 at 20:52
I don't think that'd make any difference. – Pointy Oct 14 '14 at 20:53
We'll see. You could be right. or I could be :-). Only the OP will know. But in any event, I think he needs to refresh the page or the changes won't show. What do you think? – Len_D Oct 14 '14 at 20:55

score 0 · Answer 4 · answered Oct 14 '14 at 20:56

0

Try to add query to bg.php

var d = new Date();
var n = d.getTime();
$container.css("background-image", "url(bg.php?" + n + ")");

the browser will not load the file with same name again

answered Oct 14 '14 at 20:56

alquist42

709
1
8
20

1

You could salt that Date() with a Math.random() to lower probability of date repetition by occasional clock adjustments ... and add 42 while you're at it :) – henser Oct 14 '14 at 20:59

score 0 · Answer 5 · answered Oct 14 '14 at 21:03

You're going to need to set the background-image to a different URL if you don't want to reload the entire page. However, you can attach a fragment (ex. http://example.com/index.php#fragment), or alternatively a query string (ex. http://example.com/index.php?querystring) to that URL .php file each time. If you are going to reset it every 5 seconds, a good method would be to append a new Date().getTime(); to the end of the image source URL, like this:

var currentDate = new Date();
$container.css("background-image", "url(bg.php#" + currentDate.getTime() + ")");

or even more succinctly/efficiently

$container.css("background-image", "url(bg.php#" + new Date().getTime() + ")");

You should end up with a background-image property of something like url(bg.php#1413320228120). This is good because the fragment won't affect where the browser looks for the image (still bg.php), but it'll consider it a different URL each time and load it again.

Your solution should look something like:

(function($)
{
    $(document).ready(function()
    {

        var $container = $("header");
        $container.css("background-image", "url(bg.php)");
        var refreshId = setInterval(function()
        {
            $container.css("background-image", "url(bg.php)");
        }, 9000);
    });
})(jQuery);

It is similar to the solution that works for me, but if use # not detected at all as unique url. Or so I think. Thanks. — Fernando M, Oct 14 '14 at 22:45
@FernandoM I'm glad you found a solution. As far as the fragments, I am guessing this depends on the browser. — ajndl, Oct 14 '14 at 22:46

jQuery setinterval function change css

5 Answers5