在json調用上設置間隔以重新加載新圖像

我試圖設置從Flickr API重新加載新圖像的時間間隔。在json調用上設置間隔以重新加載新圖像

我需要添加什麼才能使頁面使用setInterval來抓取新圖像。

這是我的代碼：

$(document).ready(function(){ 
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", 
    { 
     tagmode: "any", 
     format: "json" 
    }, 
    function(data) { 
     var rnd = Math.floor(Math.random() * data.items.length); 

     var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 
     $('.main').css('background-image', "url('" + image_src + "')"); 
    }); 
});

來源

2015-10-05 kerki

你想在一個設定的時間間隔加載不同的隨機圖像？

我認爲這應該爲你工作：

var loadNewImage = function() { 
    var rnd = Math.floor(Math.random() * data.items.length); 
    var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 
    $('.main').css('background-image', "url('" + image_src + "')"); 
} 

setInterval(loadNewImage(), 3000);

這會設置一個新的背景圖像，每3秒（3000毫秒），所以你可能要更改間隔時間，或將其與一個連接VAR在頂部，如果你願意，你可以很容易地改變：

var imageInterval = 10000; 
setInterval(loadNewImage(), imageInterval);

來源

2015-10-05 14:24:45

是的，我想加載不同的隨機圖像 – kerki

使用'loadNewImage'代替'loadNewImage（）'作爲第一個參數爲'setInterval'。 'loadNewImage（）'執行該函數並使用它的返回值（在這種情況下未定義）作爲'setInterval'的第一個參數，這是不正確的。 –

獲取未捕獲SyntaxError：意外的令牌var爲該行var loadNewImage = function（） – kerki

我會使用setTimeout代替setInterval，在情況下，它花費的時間比[間隔]秒更長的時間來獲取圖像，由於網絡延遲。

$(document).ready(function() { 
    var INTERVAL_IN_MS = 1000; // wait 1 second 

    function getImage() { 
    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { 
     tagmode: "any", 
     format: "json" 
     }, function(data) { 
      var rnd = Math.floor(Math.random() * data.items.length); 
      var image_src = data.items[rnd]['media']['m'].replace("_m", "_b"); 
      $('.main').css('background-image', "url('" + image_src + "')"); 

     // start the timeout countdown only after the previous image has been fetched and displayed 
     window.setTimeout(getImage, INTERVAL_IN_MS); 
     }); 
    } 

    window.setTimeout(getImage, INTERVAL_IN_MS); 
});

來源

2015-10-05 14:31:43

在json調用上設置間隔以重新加載新圖像

回答

相關問題