Question

我有一个外部JavaScript src，我想添加一个加载动画，直到它完成加载：

<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>

我目前正在使用jQuery（window）.load，但它等待所有页面完全加载，我想只等待那个特定的代码：

<script>$(window).load(function(){$(".loadingif").hide();});</script>

更新这是我建议的代码，它不起作用，我做错了什么---

some text.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script>hideLoading();</script>
some text.....
<script>function hideLoading(){$(".loading-gif").hide();}</script>

Answer 1

希望这有效：

<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">
    hideLoadingThingy();
</script>

第二个脚本应在第一个脚本完成加载后运行。这是因为它包含在第一个之后，所以首先加载第一个。

除非xxx.js中的方法是异步调用的，否则浏览器一次只能执行一个任务。详细了解here

<强>更新

使用此：

some text 2.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">$(".loading-gif").hide();</script>
some text 2.....

Answer 2

您可以键入将加载到全局范围的预期javascript对象：

(function checkValue(){
    if (libraryValue === undefined){
        setTimeout(checkValue, 100);
    } else {
        $(".loadingif").hide();
    }
})();

除非您选择异步加载该库，否则我会使用Feathercrown的解决方案。

添加加载动画，直到特定的javascript完成加载

2 个答案: