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

Posted 2023-03-25

【中文标题】在每次页面访问或页面重新加载时显示一个新的 GIF

【英文标题】：Show a new GIF on each page visit or page reload

【发布时间】：2016-08-02 09:08:35

【问题描述】：

我正在使用 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) + '°');
    $('.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 + ')');
  );

【参考方案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 + ')');