在每次访问页面或重新加载页面时显示新的 GIF

Question

我正在使用 GIPHY api 来显示基于查询的图像。下面是我目前用来拉取图像的代码。它有效，但现在的问题是每次您访问该网站时，每次访问都会显示相同的 GIF，直到查询发生变化。我想要的是 GIF 在每次访问或页面重新加载后更新到数组中的新随机图像，即使查询相同也是如此。我是 javascript 的新手，不确定如何解决此问题，因此非常感谢您的帮助！

这是我用来查询数据的函数

function weather(position) {
  var apiKey = '';
  var url = '';
  var data;
  // console.log(position);
  $.getJSON(url + apiKey + "/" + position.coords.latitude + "," + position.coords.longitude + "?callback=?", function(data) {

    $('.js-current-item1').html(Math.floor(data.currently.temperature) + '&#176;');
    $('.js-current-item2').html(data.currently.summary);

    gif(data.currently.icon)
    city(position.coords.latitude + "," + position.coords.longitude)

  });
}

这里是从 GIPHY 拉取图片的函数

function gif(status) {
  var apiKey = '';
  var url = 'http://api.giphy.com/v1/gifs/search?q=';
  var query = status;
  $.getJSON(url + query + apiKey, function(data) {
    $('body').css('background-image', 'url(' + data.data[5].images.original.url + ')');
  });
}

Answer 1

在你的函数 gif(status) 中设置图像时从数据数组中选择一个随机值而不是固定值

改变

$('body').css('background-image', 'url(' + data.data[5].images.original.url + ')');

到

var randomIndex = Math.floor(Math.random() * data.data.length);
$('body').css('background-image', 'url(' + data.data[randomIndex].images.original.url + ')');

在每次访问页面或重新加载页面时显示新的 GIF

Show a new GIF on each page visit or page reload

javascript

arrays

json

gif

giphy