jQuery setinterval function change css

Question

Я хочу сделать функцию, чтобы изменить свой фон <header> каждые 5 секунд.

С одной стороны, у меня есть изображение, которое меняется каждый раз, когда X, оно генерируется файл PHP:

../bg.php 

Так что я сделал, что я изменить фоновое изображение с $("header").css().

Запуск сценария, как это:

(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); 

Но не меняется само по себе.

Answer 1

Возможно, потому что ваш браузер кэширует его. разместить случайное число в конце 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); 

Answer 2

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

Возможно, вам необходимо вызвать location.reload(); также.

Answer 3

Это всего лишь предположение, но есть хороший шанс, что браузер просто кэширует файл. Вы можете добавить заголовки управления кэшем на сервере, или же добавить Нонс параметру каждый раз, когда вы измените фон:

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

Это, вероятно, хорошая идея, чтобы идти вперед и установить заголовки кэша правильно в любом случае, просто чтобы избежать клиентские браузеры излишне кэшируют один и тот же образ снова и снова.

Answer 4

Попробуйте добавить запрос bg.php

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

браузер не будет загружать файл с таким же именем снова

Answer 5

Вы вам нужно будет установить background-image на другой URL-адрес, если вы не хотите перезагружать всю страницу. Тем не менее, вы можете прикрепить фрагмент (например, http://example.com/index.php#fragment) или, альтернативно, строку запроса (например, http://example.com/index.php?querystring) к этому URL-адресу .php каждый раз. Если вы собираетесь сбросить его через каждые 5 секунд, хороший метод будет присоединять new Date().getTime(); до конца исходного изображения URL, например:

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

или даже более сжато/эффективно

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

Вы должны получить background-image что-то вроде url(bg.php#1413320228120). Это хорошо, потому что фрагмент не повлияет на то, где браузер ищет изображение (все еще bg.php), но каждый раз он будет рассматривать его по-разному и загружать его снова.

Ваше решение должно выглядеть примерно так:

(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);