the program needs invoke a function after all code, including HTML, javascript, CSS, etc., is loaded? Can javascript do it?
A:
If you're using the jQuery library, you simply do this:
$(document).ready(function() {
// The code you need to have executed after loading the page
});
Gert G
2010-06-13 01:24:29
The [`$(document).ready`](http://api.jquery.com/ready/) event fires just after the parsing of the document is finished, that's usually *before* other resources like images and subframes are loaded.
CMS
2010-06-13 01:27:32
-1 Why push JQuery on people who didn't mention it? Perhaps JQuery is out of scope for either the project or the person asking the question's level of comfort?
Chris Sobolewski
2010-06-13 01:28:34
@CMS, true but the DOM is ready for traversal at that point and new nodes can be added without any adverse effect, in most cases.
Chris Sobolewski
2010-06-13 01:29:41
@Chris, yes I know, but the OP *specifically wants* to know when *all* the resources are loaded.
CMS
2010-06-13 01:31:16
@CMS - Point taken.
Gert G
2010-06-13 01:33:18
A:
window.onload = function() {
// Your code here
};
What have you tried?
artlung
2010-06-13 01:25:39
A:
The jQuery $(document).ready(...) method is triggered when the dom is loaded and can be manipulated and before all scripts, images, etc. are loaded.
The window.onload event will fire when everything that has been requested has completed loading.
jhorback
2010-06-13 01:29:07
+3
A:
for JavaScript
window.onload = function(){
//your code
};
for JQuery
$(document).ready(functino(){
//your code
});
Spring
2010-06-13 01:29:37
`window.onload` and `$(document).ready` are not equivalent, the first one does what the OP wants, but the second, will fire early, just after the DOM parsing is done (images and other resources might not be loaded yet), the jQuery equivalent would be `$(window).load(function () {/*...*/});`
CMS
2010-06-13 01:36:31
@CMS Which would take a performance hit due to waiting for images to be loaded.
Gert G
2010-06-13 01:53:21
The jQuery ready function is nice. I've tried messing with all sorts of alternatives and its the best. Plus you get to use jQuery - (ok I'm biased, but its a great library!)
dana
2010-06-13 02:10:53
@Greg, of course, but that's the *specific requirement* of the OP, I guess he is doing something that relies on the images being already loaded... only he knows...
CMS
2010-06-13 02:55:22
I guess Greg is me... :D ... He never stated that images needed to be loaded, just that all the code should be loaded.
Gert G
2010-06-13 03:00:08
+3
A:
window.onload will fire after all images, frames and objects have finished loading on the page. Your question isn't clear enough on whether or not you want the script to wait for those, but if you don't then you need a "document ready" solution.
Firstly, many (all?) DOM-based Javascript frameworks provide this functionality, cross browser in the form of an event. jQuery example:
$(document).ready(function() {
alert("DOM is ready");
});
If you want to do it without the framework, it gets a little more awkward. Most browsers (*cough*notIE) provide a DOMContentLoaded event:
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
alert("DOM is ready");
}, false);
}
For IE's part, the defer attribute on a script tag will do the job. You can use conditional comments to make sure only IE parses the script:
<!--[if IE]
<script type="text/javascript" defer>
alert("DOM is ready");
</script>
<![endif]-->
Andy E
2010-06-13 01:31:19