JQuery PHP обновить фоновое изображение каждые 10 секунд

Question

Я работаю на веб-странице своей радиостанции. Я уже показываю, какой художник и название играет. Но теперь я хотел бы видеть, что фон меняется с художником. Поэтому, когда играет Фил Коллинз, мне очень понравилось видеть образ Phil COllins на моем фоне.

Я уже понял, как я могу загрузить фоновое изображение с JQuery:

$(".container").css("background-image", "url('images/bg/artist/<?php echo $newartist; ?>.jpg')"); 

Но я не могу понять, как я могу показать фон на странице загрузки и обновите его через каждые 10 секунд ,

Надеюсь, кто-то может мне помочь.

Заранее благодарен!

Krijn

Answer 1

Вы можете попробовать setInterval(function(){ alert("Hello"); }, 3000);

http://www.w3schools.com/jsref/met_win_setinterval.asp

Answer 2

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

<div 
    class='container' 
    style='background-image: url('images/bg/artist/<?= $newartist; ?>.jpg')' 
> 
    ... 
</div> 

Теперь, чтобы обновить этот образ, вам нужно получить текущий художник корыто Аякса. Поэтому вам понадобится простой скрипт php, который может вернуть текущего исполнителя. Затем можно назвать этот сценарий так:

function updateArtist() { 
    $.ajax({ 
     method: 'GET', 
     url: 'current_artist.php', 
     success: function(newArtist) { 
      $(".container").css("background-image", "url('images/bg/artist/" + newArtist + ".jpg')"); 
     } 
    }); 
} 

И автоматически делать это каждые 10 секунд, вы могли бы назвать его на интервале:

setInterval(updateArtist, 10000); 

Просто некоторые псевдо код из верхней части моей головы , но он должен указать вам в правильном направлении. Не стесняйтесь спрашивать, что-то неясно.

Answer 3

Вы можете использовать

setTimeout(function(){ alert("Hello"); }, 10000); 

See Demo Here: