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
deferwith 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
3 Answers
Reset to default 5You 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