[英]Display loading GIF and remove after script has loaded
我懒于加载我的Facebook评论插件,但该插件需要一段时间才能加载。 我希望用户通过添加加载GIF来知道它正在加载。 我知道如何添加加载的GIF,但是一旦注释插件完全加载,我不知道如何删除它。 这是我尝试过的:
<img id="loading" src="/media/assets/loading.gif">
<script>
function loadAPI() {
var js = document.createElement('script');
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
document.body.appendChild(js);
js.onload=loading();
}
window.onscroll = function () {
var rect = document.getElementById('comments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
//Function used to remove GIF
function loading(){
var loading = document.getElementById('loading');
loading .parentNode.removeChild(loading);
}
</script>
<div id="fb-root"></div>
<div id="comments" class="fb-comments" data-href="http://example.com" data-numposts="5" data-colorscheme="light"></div>
我使用的代码在用户滚动到注释部分时显示GIF,然后在调用所有功能后将其删除。 这不是我想要的。 我希望在显示Faceboook评论插件后将其删除。 在插件显示之前,我的代码将GIF移除了很长时间。 我该怎么做才能解决此问题?
首先,当您实际上需要将引用传递给js.onload
时,您将调用加载功能,因此在Facebook插件甚至还没有完成加载javascript之前就执行了加载回调。 所以,改变
js.onload=loading();
至
js.onload=loading;
现在,当插件本身完成加载后,gif就会被删除,但是我们可以做得更好。 该插件将设置一个全局对象FB
,您可以使用该对象来订阅注释( source )的render事件,如下所示:
FB.Event.subscribe("xfbml.render", function(){
//The comments are now rendered, remove the image
});
放在一起:
<img id="loading" src="/media/assets/loading.gif">
<script>
function loadAPI() {
var js = document.createElement('script');
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
document.body.appendChild(js);
js.onload=loading;
}
window.onscroll = function () {
var rect = document.getElementById('comments').getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadAPI();
window.onscroll = null;
}
}
//Function used to remove GIF
function loading(){
FB.Event.subscribe('xfbml.render', function(){
var loading = document.getElementById('loading');
loading.parentNode.removeChild(loading);
});
}
</script>
<div id="fb-root"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.