在json调用上设置重新加载新图像的间隔

set interval on json call to reload new image

本文关键字：图像 新图像 json 加载 设置 新加载 调用      更新时间：2023-09-26

我正在尝试设置从Flickr API重新加载新图像的间隔

我需要添加什么才能使页面使用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 + "')");
    });
});

我将使用setTimeout而不是setInterval，以防由于网络延迟而需要比[interval]秒更长的时间来获取图像。

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

您想在设定的间隔内加载不同的随机图像吗?

我认为这应该适合你:

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 imageInterval = 10000;
setInterval(loadNewImage(), imageInterval);
相关文章：