Question

我正在制作带有动画的模板。事情是这样的，与动画相关的JS文件应该写在HTML页面的底部，如

<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
    <!-- Site Title-->
    <title>Sample</title>    
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400,400i,700,700i,900,900i">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">            
</head>   
<body>
    <div>
        <div class="abc"></div>
    </div>
    <script src="js/core.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

如果我们写

<script src="js/core.min.js"></script>
<script src="js/script.js"></script>

HTML顶部的动画不起作用。

现在，我正在使用该模板开发AngularJS应用。在这里我看不到动画。

我很困惑在哪里声明那些外部js文件。

Answer 1

您可以使用javascript defer，此属性告诉浏览器仅在完全解析并加载HTML文档后才执行脚本文件

<script defer src="script.js">

浏览器支持，https://www.w3schools.com/tags/att_script_defer.asp

NOTE: defer attribute should be used with an external javascript file

Answer 2

因为没有人解释为什么，所以您应该知道HTML是同步解析的。这意味着浏览器一次从顶部开始，一直到底部，一次“读取”该文件。

因此，在页面顶部声明脚本时，将在加载任何实际HTML之前先加载脚本。如果您的脚本依赖于HTML存在，那么您的脚本将失败。避免这种情况的最简单，最好的方法是在关闭</body>之前简单地声明那些脚本。正如其他人提到的那样，您也可以使用defer标记，尽管应注意，该标记不适用于嵌入式Javascript，并且在较早的浏览器中也不支持。

Answer 3

我的问题已解决，控制器中包含以下代码

myApp.
controller('commonCtrl',['$scope','$http','$window','$location', function($scope,$http,$window,$location) {
    console.log('commonCtrl');
    function includeJs(jsFilePath) {
        var js = document.createElement("script");
        js.type = "text/javascript";
        js.src = jsFilePath;
        document.body.appendChild(js);
    }
    includeJs("js/core.min.js");
    includeJs("js/script.js");
}]);

这里JS文件正在加载中，所以没有问题。所有动画都可以正常播放

html加载后如何加载js文件

3 个答案: