After you are done with this blog post, your javascript will not fail due to dynamic scripts not fully loaded.
First let's learn how the DOM(Document Object Model) actually works.
When a web page is loaded, the browser creates a Document Object Model of the page.
The HTML DOM model is constructed as a tree of Objects:
In order for you to manipulate the html elements, attributes and ect of the document, you will have to wait either for the whole document(complex web page) to be fully loaded or just the basic parts(simple html document).
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>Window Load Javascript - Basic
To find out if the above web page is loaded or document is ready in javascript, you can easily use the this code in your javascript:
document.addEventListener("DOMContentLoaded", function(event)
{
//document is fully loaded
})jQuery Document Ready Shorthand - Basic
If you are using jquery in your project, you can easily use this function:
$(document).ready(function($)
{
//document is fully loaded jquery
});
This simple html document is only going to take less than 100 milliseconds.
Advance HTML Document
A more complex web page document can contain the following:
- HTML Text
- Images
- Audios
- Videos
- Iframes
<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Create A Secure Login System With PHP And MySQL - Code With Mark</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name=viewport content="width=device-width, initial-scale=1">
<link rel="canonical" href="https://codewithmark.com/how-to-create-a-secure-login-system-with-php-and-mysql" />
<meta name="description" content="Learn how to easily create a secure login system where you users can download your digital files after they have registered and activated their account." />
<link defer async="true" rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding: 0px 0px 0px;
background-color: #DAE3E6;
}
a {
text-decoration: none;
}
.hlink {
color: black;
text-decoration: none;
}
.post_title_link {
color: black;
font-size: large;
}
.np_widget_footer,
.np_widget_sidebar {
padding: 0;
font: 16px/2 Georgia, Serif;
list-style: none!important;
}
p {
margin: 0 0 24px;
margin: 0 0 2.4rem;
padding: 0;
font: 18px/2 Georgia, Serif;
word-wrap: break-word;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
}
</style>
</head>
<body style="overflow:auto;">
<nav class="navbar navbar-fixed-top" role="navigation" style='max-width : 1000px; margin : 0 auto;background-color: #DAE3E6'>
<div class="container" style='max-width : 850px; margin : 0 auto;'>
<div class="navbar-header" style="padding:2px;">
<button type="button " class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only ">Toggle navigation</span><span class="icon-bar btn-success"></span><span class="icon-bar btn-success"></span><span class="icon-bar btn-success"></span>
</button><a href="https://codewithmark.com" class="btn navbar-btn btn-success" style="text-align:left; "><i class="fa fa-chevron-left "></i>
Code With Mark
/<i class="fa fa-chevron-right "></i></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li><a class="menu_item_list_group fa fa-home" href="https://codewithmark.com/" target="_self"> Home</a>
</li>
<li><a class="menu_item_list_group fa fa-desktop" href="/category/courses" target="_self"> Free</a>
</li>
<li><a class="menu_item_list_group fa fa-question" href="/resources" target="_self"> Resources</a>
</li>
<li><a class="menu_item_list_group fa fa-smile-o" href="about" target="_self"> About</a>
</li>
<li><a class="menu_item_list_group fa fa-comment-o" href="/contact" target="_self"> Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div style=' padding:30px'></div>
<div class="ScreenData container" style='max-width : 1000px; margin : 0 auto; border: 1px dotted #CCC;padding : 20px;background : #FFF; border-radius: 50px;'>
<div style="padding:1px;"></div>
<div class="google_adsense_container"></div>
<div class="panel panel-info" style=" border-radius:50px; ">
<div class="panel-heading" align="center" style="border-top-left-radius:50px;border-top-right-radius:50px;">
<h2><a href="how-to-create-a-secure-login-system-with-php-and-mysql" class="hlink text-capitalize" style="color:black;"> How To Create A Secure Login System With PHP And MySQL</a></h2>
</div>
<img src="https://codewithmark.com/np-content/uploads/php-hash-password-code-with-mark-2016-09-27-100-42d.jpg" class="img-responsive" alt=" " >
<div class="panel-body np_post_content" style="padding:30px;">
<p>
</p>
<p></p>
<p>
<button type="button" class="btn btn-primary btn-lg btn_api_mk_frm" frm_id="ae296fce">Download Project Files</button>
</p>
<p> </p>
<p>
<iframe width="100%" height="480" src="https://www.youtube.com/embed/1bbpyMOIcCA?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/xoPxeD6tvXI?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/RBKkfUk7fog?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/2E_9WzYXw3w?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/O0zNmxtOgws?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/IBYoQGQYz-8?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/sycy1uppg8Q?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/CrobjSQ2M38?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/YJ5X9mt-5cg?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/KQpeoP-_vo4?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/brGwBXctvXw?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<br />
<iframe width="100%" height="480" src="https://www.youtube.com/embed/_oHtDehfk0o?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</p>
<br>
<br>
<div class="post_rating"></div>
</div>
<div style="padding:15px;" class="container-fluid">
<div class="post_pre text-left col-sm-6"></div>
<div class="post_next text-right col-sm-6"></div>
</div>
<div class="related_posts" style="padding:15px;"></div>
<br>
<br>
</div>
</div>
</body>
</html>Window Load Javascript - Advance
window.addEventListener("load", function(event)
{
console.log("Web page fully Loaded. HTML, Javascript, CSS, Images, Iframes and objects are fully loaded.");
});
jQuery Document Ready Shorthand - Advance
$(window).load(function() {
/** Add your code here **/
console.log("Web page fully Loaded. HTML, Javascript, CSS, Images, Iframes and objects are fully loaded.");
})Which One To Use Basic Or Advance
It depends on your web site project.
Only use advance window onload method if your code relies on images, video, audio, iframe or external files (js or css) to be used. Otherwise, basic one will work for you.