我懒惰地加载我的 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,然后在调用所有函数后将其删除。这不是我想要的。我希望在 Facebook 评论插件显示后将其删除。我的代码在插件显示之前很久就删除了 GIF。我可以做什么来解决这个问题?
最佳答案
首先,当您实际需要传递对 js.onload 的引用时,您会调用加载函数,因此加载回调会在 Facebook 插件完成加载之前执行JavaScript。 所以,改变一下
js.onload=loading();
至
js.onload=loading;
现在,当插件本身完成加载时,gif 就会被删除,但我们可以做得更好。该插件将设置一个全局对象FB
,您可以使用它来订阅评论( source )的渲染事件,如下所示:
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>
关于javascript - 显示加载 GIF 并在脚本加载后删除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36532482/