R
RobG
There has been a bit of work done to get an init() function to run when
the DOM is complete but before all the images have been downloaded. The
idea is to kickoff init() scripts when all the elements are there but
not wait for large images.
Below is a script which uses 3 different techniques, one each for IE,
Safari and Mozill/Opera 9. The Safari version uses browser sniffing,
but I think with a little work that could be removed - the following
code is really just a proof of concept.
My simple solution is to insert a script element that calls the init
function just before the closing body tag. It seems just as good to me,
always runs before the above methods, is far less code and likely to run
more consistently in more browsers. What do others think?
Script:
<title>Onload</title>
<script type="text/javascript">
function init(s){
if (!this.init.called) {
this.init.called = true;
document.getElementById('xx').innerHTML += s;
}
}
init.called = false;
/* for Internet Explorer (using conditional comments)
* From Matthias Miller:
*
http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
*/
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer "
+ "src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init('IE version'); // call the onload handler
}
};
/*@end @*/
/* for Mozilla and Opera 9 browsers
* From Dean Edwards:
* http://dean.edwards.name/weblog/2005/09/busted/
*/
if (document.addEventListener) {
document.addEventListener(
"DOMContentLoaded",
function(){init('Mozilla & Opera 9 version');},
false
);
}
/* Safari/Webkit version
* From John Resig (author of jQuery)
*/
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init('Safari/Webkt version'); // call the onload handler
}
}, 10);
}
</script>
<body>
<div id="xx"></div>
<img src="http://www.space.com/images/ig320_mcnaught_Boomer_02.jpg">
<!-- If uncommented, the following script runs before the others -->
<script type="text/javascript">
// init('Footer script used');
</script></body>
the DOM is complete but before all the images have been downloaded. The
idea is to kickoff init() scripts when all the elements are there but
not wait for large images.
Below is a script which uses 3 different techniques, one each for IE,
Safari and Mozill/Opera 9. The Safari version uses browser sniffing,
but I think with a little work that could be removed - the following
code is really just a proof of concept.
My simple solution is to insert a script element that calls the init
function just before the closing body tag. It seems just as good to me,
always runs before the above methods, is far less code and likely to run
more consistently in more browsers. What do others think?
Script:
<title>Onload</title>
<script type="text/javascript">
function init(s){
if (!this.init.called) {
this.init.called = true;
document.getElementById('xx').innerHTML += s;
}
}
init.called = false;
/* for Internet Explorer (using conditional comments)
* From Matthias Miller:
*
http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
*/
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer "
+ "src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init('IE version'); // call the onload handler
}
};
/*@end @*/
/* for Mozilla and Opera 9 browsers
* From Dean Edwards:
* http://dean.edwards.name/weblog/2005/09/busted/
*/
if (document.addEventListener) {
document.addEventListener(
"DOMContentLoaded",
function(){init('Mozilla & Opera 9 version');},
false
);
}
/* Safari/Webkit version
* From John Resig (author of jQuery)
*/
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init('Safari/Webkt version'); // call the onload handler
}
}, 10);
}
</script>
<body>
<div id="xx"></div>
<img src="http://www.space.com/images/ig320_mcnaught_Boomer_02.jpg">
<!-- If uncommented, the following script runs before the others -->
<script type="text/javascript">
// init('Footer script used');
</script></body>