html加载后如何加载js文件答案

【问题标题】：How to load js file after html got loadedhtml加载后如何加载js文件
【发布时间】：2019-01-23 11:20:02
【问题描述】：

我正在制作一个带有动画的模板。这里的事情是，与动画相关的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 文件。

【问题讨论】：

如果它们在页面底部工作，您为什么要将它们移到顶部？
你总是在末尾声明js，并且在begin中需要css，html需要先加载然后js，
使用defer和脚本标签来延迟脚本加载
@Mayank 我尝试使用 defer，对于纯 HTML，它可以工作，但在 AngularJS 中，它不工作。你能提出任何其他想法吗

标签： javascript jquery html css angularjs

【解决方案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

【讨论】：

我尝试使用 defer，对于纯 HTML，它可以工作，但在 AngularJS 中，它不工作。你能提出任何其他想法吗

【解决方案2】：

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

因此，当您的脚本在页面顶部声明时，它会在任何实际 HTML 加载之前加载。如果您的脚本依赖于 HTML 存在，那么您的脚本将失败。避免这种情况的最简单、最好的方法是在关闭</body> 之前简单地声明这些脚本。正如其他人所提到的，您也可以使用 defer 标签，但应该注意这不适用于内联 Javascript，并且在旧版浏览器中不受支持。

【讨论】：

我尝试使用 defer，对于纯 HTML，它可以工作，但在 AngularJS 中，它不工作。你能提出任何其他想法吗

【解决方案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 文件正在加载，最后，所以没有问题。所有动画都开始工作了

【讨论】：