javascript defer keyword not behaving as expected - javascript

As far as I know, if we set defer keyword on a script tag it will not block the rest of the page to render, the rest of the page will be rendered and just before the window load event the script tag will be executed.
I have a simple HTML and which has a script tag with a defer attribute. Inside the script tag, I have a long loop so that it will take time, and below this script tag, I have a paragraph tag as well. Ideally, when I will reload the browser, my all the content should be rendered and then script execution should be there, but the last paragraph is not being rendered earlier as expected.
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Hi I am a p tag</p>
<img src="./img/Screenshot 2020-07-25 at 11.50.51 PM.png" />
<input type="text" />
<link rel="stylesheet" href="./css/styles.css">
<script type="text/javascript" src="./src/file1.js" defer></script>
<p>I will be rendered earlier as above javascript file has a defer attribute</p>
</body>
</html>

The script isn't the problem here. It is your link tag causing the issue.
You can see this demo here;
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_script_defer
If you add this line within the body;
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.10/css/bootstrap.css" />
Watch how the p tags now render after the alert.

The problem isn't the script tag, it's the link tag. It should be located inside of <head>, not on <body>.

Related

external js file loaded but the code don't working

when I write js code internally in the html file It's work well.
hre is the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./cs.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="root" onload="App">
</div>
<script src="js/App.js" type="module" />
</body>
</html>
and here is App.js file
import Insert from './Insert.js';
function App(){
document.getElementById("root").insertAdjacentHTML("afterbegin",'<h1>hello Javascript</h1>');
};
onload is not an attribute supported by div elements, generally if you use it you would apply it to the body element, but it should be avoided in favour of addEventListener
The value of the onload attribute is the body of a JS function. Just mentioning the name of another function doesn't do anything. If you want to call a function you would usually follow the name with ().
type="module" loads a JS module, which (among other things) means the outer scope is the module and not the global scope so you can't access App anyway. Again, use addEventListener.
The </script> end tag for the script element is mandatory and you omitted it. (Since it was that last thing in the document it probably won't break anything, but you are opening yourself up for future problems).

How can i add animation to materialize pages?

I have 3 html files in my code. at this moment, I use a tag as a link and I want to add animation for the page switching.
I am using materialize but I can't find how to add animation for that.
Anyone can help?(I want when I click a button in my index.html, it will animate for example slide right, and change to menu.html)
This is the index.html code:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel = "stylesheet" type="text/css" href = "Sources/bootstrap.css">
<link rel = "stylesheet" type="text/css" href = "Sources/Matirialize.css">
<script type = "text/javascript"
src = "Sources/jquery-2.1.1.js"></script>
<script src = "Sources/Matirialize.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src = "jquery.js"></script>
</head>
<body>
<a class="waves-effect waves-light btn">button</a>
</body>
</html>
and this is the menu.html code:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p>this is supose to be the menu page</p>
</body>
</html>
Under normal circumstances, you cannot create animations for transitions between two separate HTML pages, since the browser "gets rid" of the first page and stops all of its code before it begins to load the second page (and therefore, before its code begins to run). Basically, during the time between pages, you don't have the ability to run your own code to create animations.
If you look at the link לבני מלכה posted in the comments, however, you can see some ideas for getting around this by making the browser load the new page in special ways and then inserting it into the browser window (rather than just having an a link).

Map not showing up using JavaScript?

I created a map using html and javascript code but it is not showing up. Is my code ok?
Am I calling the Esri basemap the right way?
HTML
<!DOCTYPE html>
<html>
<head>
<title>Map</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Load Leaflet from CDN-->
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css" />
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
</head>
<body>
<div id="map" style="width:400px;height:400px;"></div>
<script src="basemap.js" defer></script>
</body>
</html>
basemap.js
(function() {
var map = L.map('map').setView([54.296500, -2.209221], 5);
L.esri.basemapLayer('Oceans').addTo(map);
var popup = L.popup();
})();
You are not creating the necessary div with "map" id.
Add it as:
<body>
<div id="map" style="width:400px;height:400px;"></div>
</body>
Here is an example fiddle
You call your anonymous function which contains L.map('map') within basemap.js script in your HTML head, when the body and its DOM are not ready yet (they do not "exist" yet in memory).
Please refer to pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it.
The most simple workaround is to put your basemap.js script tag after your div with id="map". A common practice is (was) to put all script tags just before the end of the HTML body.
The current recommended practice is to keep your script tags in your HTML head, but use async (or defer) attribute, and attach instructions that need the DOM to be ready to the DOMContentLoaded event. See also Where is the best place to put <script> tags in HTML markup?

How to load AngularJS in a div

I have a main page with this structure.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>..:: Test Application ::..</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="../js/jquery.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script>
function loadOption(idopt){
if(idopt==1){
var curl = '../view/otherpage.php'
}
$("#mainContainer").load(curl);
}
</script>
<body onLoad=loadOption(<?php echo idopt;?>)>
<div id="mainContainer"></div>
</body>
</html>
otherpage.php
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../js/angular.min.js"></script>
</head>
<body>
{{1+1}}
</body>
</html>
But, when i load the main page... the AngularJS doesn't run. What could be wrong?
That's because you're loading otherpage.php after the DOMContentLoaded event has finished.
In other words, you're filling in the space inside the mainContainer div with otherpage.php content after the event DOMContentLoaded. And that is where Angular's Automatic Initialization takes place.
So in order to get it to work, you'll have to manually bootstrap Angular.
Here's Angular's documentation about it:
http://docs.angularjs.org/guide/bootstrap
Other options are available and are much better, such as referencing your Angular related files (angular, your controllers, services, directives and what not) at the main page.
Depending on the browser, pulling the script element in otherpage.php out of the head element and into the body element, should correct this.
We can't see all your code, but it may be better to just load Angular.js in the head of the main page. You could do this using your own a script package manager control flow to avoid this type of failure for other dependencies. That would be good style...
make a common includes page and add angular.js file to it and include it in the header so that it is available through out the site or use it in the main page

jQuery + jQuery mobile load script twice when script tag is emebedded in body

i have found a strange behavior when i was learning jQuery Mobile. below is my test code. the firebug shows the "test.js" was loaded twice if i put the script tag in body(even the "test.js" is empty). is this a bug or we could not put script tag in body when we are using jquery mobile?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>test</title>
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>
<script type="text/javascript" src="/test.js"></script>
</body>
</html>
I had the same problem, put all your javascript in the head. This solved the issue for me.
I've never ran into such issues, but try adding the script tag AFTER the element (but before the ) one), or even better, load it dymically after the pagecreate event.

Categories