我从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();
});