jquery - jQuery 和 Giphy - 下载后设置背景图像

Question

我从 GIPHY 随机获取 gif 图像，并想将它们设置为我身体的背景图像。单击时，应显示一个新的随机 gif。我已经让这部分工作了，但是我想等到整个 gif 被下载，直到设置下一个背景图像。理想情况下，在这种情况发生之前，应该显示一个加载器 gif。我怎样才能做到这一点？

这是我到目前为止的代码：

$(document).ready(function() {
// Giphy API defaults
const giphy = {
    baseURL: "https://api.giphy.com/v1/gifs/",
    key: "API_KEY_HERE",
    tag: "people",
    type: "random",
    rating: "pg-13"
};
// Target gif-wrap container
const $gif_wrap = $("body");
// Giphy API URL
let giphyURL = encodeURI(
    giphy.baseURL +
        giphy.type +
        "?api_key=" +
        giphy.key +
        "&tag=" +
        giphy.tag +
        "&rating=" +
        giphy.rating
);

// Call Giphy API and render data
var newGif = () => $.getJSON(giphyURL, json => renderGif(json.data));

// Display Gif in gif wrap container
var renderGif = _giphy => {
    // Set gif as bg image
    $gif_wrap.css({
        "background-image": 'url("' + _giphy.image_original_url + '")'
    });
};

newGif();

$(document).click(function() {
newGif();
});

// Call Giphy API for new gif
newGif();

});