使用jQuery和AJAX定期更改背景圖像src

我試圖讓我的頁面正文的背景圖像每隔（近似）N秒改變一次。對於這個我有一個PHP函數，當我使用AJAX調用它時，會隨機調用圖像src。然後我通過這個新生成的替換當前的身體背景圖像src，但我無法讓它工作。使用jQuery和AJAX定期更改背景圖像src

這裏是代碼，它有什麼不對嗎？

(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'; 
}

難道這是因爲我使用本地主機？在我本地開發之前，我可能會出現AJAX問題。

編輯：一個線索也許是身體元素的樣式屬性不會改變/設置在Firebug中。我也試過$('body').first()和$(document.body)並使用url("")（在background-image屬性的值中），但它也不起作用。然而，onload事件會觸發。

感謝您的幫助。

來源

2013-05-09 Virus721

爲什麼在創建一個新的圖像對象，如果你從PHP獲得一個URL？只是身體的背景圖像屬性設置爲：

$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（「」），但沒有奏效。我嘗試了你的解決方案（直接把網址），但它也不能工作:( – Virus721 2013-05-09 18:59:47

嗯，我加了簡單的引號，裏面的解決方案的url（），它現在可以工作，我正在使用圖像來避免白色眨眼圖片正在加載中感謝您的幫助編輯：其實只有香草js解決方案有效 – Virus721 2013-05-09 19:12:10

真棒 - 感謝編輯使它正確無誤。 – Freddie 2013-05-09 19:37:53

可能需要緩存胸圍阿賈克斯呼叫。嘗試將ajax調用的url屬性更改爲 '/some_path/index.php?exec=getNewBkgImgSrc & cb ='+（（new Date）.getTime（））。

來源

2013-05-09 19:17:55 Orangepill

我有不好的感覺有關var $body = $('body');

使用$('body').css('background-image', newImage.src);

來源

2013-05-09 19:44:36 Amir

使用jQuery和AJAX定期更改背景圖像src

回答

相關問題