what is the best way to make sure javascript is running when page is fully loaded?
Question
I am trying to run my javascript in my asp.net webform page but I am not sure it runs properly because all the elements are not loaded yet. How can I make sure my script is at the very bottom of the page with using jquery? So it can run when the page is loaded?
6 answers
solution1
3 2011-11-03 02:10:07
Even though everyone says use $(document).ready it's kind of an anti-pattern.
What you really want to do is put any scripts you want to load at the end of the body
<html>
<head> ... </head>
<body>
...
<script src="..." ></script>
</html>
As long as your scripts are at the end of all your other HTML content the javascript will only fire when the content above it has loaded.
solution2
1 2011-11-03 02:06:16
Use .ready() :
$(document).ready(function($) {
// page is loaded
});
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
solution3
1 2011-11-03 02:06:24
With jQuery, you want to attach to the ready event. This gets fired when all DOM elements have been loaded:
jQuery(document).ready(function(){
// jQuery Code here
});
Shorthand version:
$(function(){
// ...
});
Using this method, I usually put my jQuery in an external file, or in the <head> tag.
solution4
1 ACCPTED 2011-11-03 02:06:38
With pure JavaScript, you can use
window.onload = function() {
// Page loaded
};
Or you can use jQuery's ready function:
$( document ).ready( function() {
// Dom loaded
} );
Note: jQuery's ready function fires when the DOM has loaded (unless the browser does not support a dom-ready method), not when the whole page has loaded (images, scripts, etc).
solution5
0 2011-11-03 02:06:54
You should put your code inside the document ready block as suggested in the JQuery documentation. This way it will be loaded when all the scripts will be loaded.
$(document).ready(function(){
//Put your code here
});
solution6
0 2011-11-03 02:42:54
What is the best way to make sure javascript is running when page is fully loaded?
If you mean "fully loaded" literally, ie, all images and other resources downloaded, then you have to use an onload handler, eg:
window.onload = function() {
// Everything has loaded, so put your code here
};
If you mean "after all of the HTML has been parsed and all elements are accessible from script", at which point images may still be downloading, then you can either put your script at the bottom of the source HTML or use a document.ready handler. Or both. Refer to any of the other answers for details.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.