最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to load js file after html got loaded - Stack Overflow

programmeradmin0浏览0评论

I am working on a Template with animations. Here the thing is, the JS file which is related to animations, should be written at the bottom of the HTML page like

<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
    <!-- Site Title-->
    <title>Sample</title>    
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis/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>

If we write

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

at the top of the HTML, the animations won't work.

Now, I am developing the AngularJS app by using that template. Here I couldnt see the animations.

I am in confusion where to declare those external js files.

I am working on a Template with animations. Here the thing is, the JS file which is related to animations, should be written at the bottom of the HTML page like

<!DOCTYPE html>
<html class="wide wow-animation" lang="en">
<head>
    <!-- Site Title-->
    <title>Sample</title>    
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis./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>

If we write

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

at the top of the HTML, the animations won't work.

Now, I am developing the AngularJS app by using that template. Here I couldnt see the animations.

I am in confusion where to declare those external js files.

Share Improve this question edited Aug 22, 2018 at 12:28 Lea Reimann 642 silver badges7 bronze badges asked Aug 16, 2018 at 13:17 praveen kumarpraveen kumar 1,5244 gold badges14 silver badges21 bronze badges 4
  • if they work at the bottom of the page why are you trying to move them to the top? – madalinivascu Commented Aug 16, 2018 at 13:19
  • you always declare js at end, and css in begin,html needs to load first then js, – Ahmed Sunny Commented Aug 16, 2018 at 13:21
  • Use defer with the script tag to delay script loading – Mayank Commented Aug 16, 2018 at 13:22
  • @Mayank I tried using defer, For plain HTML it is working, But in AngularJS, It's not working. Can you suggest any other ideas – praveen kumar Commented Aug 17, 2018 at 5:26
Add a ment  | 

3 Answers 3

Reset to default 5

You can use javascript defer ,this attribute tells the browser to only execute the script file once the HTML document has been fully parsed and loaded

<script defer src="script.js">

Browser support , https://www.w3schools./tags/att_script_defer.asp

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

Because no one explained why, you should know that HTML is parsed synchronously. This means that the browser "reads" the file one line at a time, starting from the top and working it's way to the bottom.

So when your script is declared at the top of the page, it is loaded before any actual HTML has been loaded. If your script depends on HTML to exist then your script will fail. The easiest, and best way to avoid this is to simply declare those scripts before your closing </body>. As other's mentioned, you can also use the defer tag, though it should be noted that this does not work for inline Javascript, and isn't supported in older browsers.

my issue got fixed, with the below piece of code in the controller

myApp.
controller('monCtrl',['$scope','$http','$window','$location', function($scope,$http,$window,$location) {
    console.log('monCtrl');
    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");
}]);

Here JS files are loading, at the end, So no issues. All animations got working

发布评论

评论列表(0)

  1. 暂无评论