各ページに新しいGIFを表示するまたはリロードする

Question

私はGIPHY APIを使用してクエリに基づいてイメージを表示しています。以下は、私が現在画像を取得するために使用しているコードです。それは動作しますが、今すぐ問題が発生するのは、Webサイトを訪れるたびに、クエリが変更されるまで毎回同じ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) 

    }); 
} 

データを照会するために使用している機能であり、ここでは画像を設定しながら、あなたの関数のgif（状態）で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

から画像を引っ張っするための機能であります固定値の代わりにデータ配列からランダム値を選択する

変更

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