How to load js file after html got loaded

Question

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.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>

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.

if they work at the bottom of the page why are you trying to move them to the top? — madalinivascu
– 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
– Ahmed Sunny, Commented Aug 16, 2018 at 13:21
@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
– praveen kumar, Commented Aug 17, 2018 at 5:26

Shushanth Pallegar · Accepted Answer · 2018-08-16 13:22:01Z

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.com/tags/att_script_defer.asp

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

answered Aug 16, 2018 at 13:22

Shushanth Pallegar

2,8721 gold badge17 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

praveen kumar Over a year ago

I tried using defer, For plain HTML it is working, But in AngularJS, It's not working. Can you suggest any other ideas

Robbie Milejczak · Accepted Answer · 2018-08-16 13:27:04Z

2

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.

answered Aug 16, 2018 at 13:27

Robbie Milejczak

5,8203 gold badges37 silver badges68 bronze badges

1 Comment

praveen kumar Over a year ago

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 · Accepted Answer · 2018-08-22 11:27:09Z

0

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

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");
}]);

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

answered Aug 22, 2018 at 11:27

praveen kumar

1,5344 gold badges14 silver badges21 bronze badges

Collectives™ on Stack Overflow

How to load js file after html got loaded

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related