Показать новый 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) + '°'); 
    $('.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 (статус) при настройке изображения выберите случайное значение из массива данных вместо фиксированного

изменение

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