Изменение фонового изображения src периодически с использованием jQuery и AJAX

Я пытаюсь изменить фоновое изображение тела моей страницы каждый (приближенно) на N секунд. Для этого у меня есть функция PHP, которая перекликается с случайным изображением src, когда я вызываю его с помощью AJAX. Затем я заменяю текущее фоновое изображение тела src на этот недавно сгенерированный, но я не могу заставить его работать.Изменение фонового изображения src периодически с использованием jQuery и AJAX

Это код, что-то не так?

(function($) { 

    var $body = $('body'); 

    window.setInterval(function() { 
     $.ajax({ 
      url: 'http://localhost/some_path/index.php?exec=getNewBkgImgSrc', 
     }).done(function(data) { 
      var newImage = new Image(); 
      newImage.onload = function() { 
       $body.css('background-image', newImage.src); 
      }; 
      newImage.src = data; 
     }); 
    }, 5000); 

})(window.jQuery);

И функция PHP, которая делает работу:

public function getNewBkgImgSrc() { 
    echo CONTENT_URL_DIR.'/Wallpapers/wallpaper ('.rand(1, 20).').jpg'; 
}

Может быть, это потому, что я использую Localhost? Я могу mremeber иметь проблемы AJAX до того, когда я развивал локально.

EDIT: Возможно, ключ заключается в том, что свойство стиля элемента body не может быть изменено/установлено в Firebug. Я также пробовал $('body').first() и $(document.body) и использовал url("") (в значении свойства background-image), но он тоже не работает. Однако событие onload срабатывает.

Благодарим за помощь.

источник

2013-05-09 Virus721

Почему вы создаете новый объект изображения, если вы получаете URL-адрес от PHP? Просто установите свойство фонового изображения тела:

$body.css('background-image', "url('" + data + "')");

При использовании ванильного JS:

document.body.style.backgroundImage="url('" + data + "')";

Посмотреть подходящий формат для этого свойства здесь: http://www.w3schools.com/cssref/pr_background-image.asp

источник

2013-05-09 18:55:54 Freddie

Да я также попытался с помощью URL() и URL ('') и URL (""), но никто не работал. Я попробовал ваше решение (поместив URL-адрес напрямую), но он не работает :( – Virus721

Ну, я добавил простые цитаты, в которых находится url() вашего решения, и теперь это работает. Я использовал изображение, чтобы избежать белого мигания, EDIT: На самом деле работает только решение vanilla js. – Virus721

Awesome - спасибо за редактирование, чтобы сделать его правильным. – Freddie

может понадобиться кэшировать бюст Аякса вызов. Попробуйте изменить свойство url вызова ajax на '/some_path/index.php?exec=getNewBkgImgSrc & cb =' + ((новая дата) .getTime()).

источник

2013-05-09 19:17:55 Orangepill

я не имею хорошее чувство о var $body = $('body');

использование $('body').css('background-image', newImage.src);

источник

2013-05-09 19:44:36 Amir

Изменение фонового изображения src периодически с использованием jQuery и AJAX

ответ

Смежные вопросы