由于window.onload()在所有页面元素加载完成后执行其函数,所以如果页面元素中存在如过大图片,页面加载速度就有所影响,因此,急需替代函数,如果不用其他js框架,如何解决,后来一搜,发现有人已经解决这事情了。http://www.brothercake.com/site/resources/scripts/domready/。
相当的不错。其源码:
domFunction.js
// DF1.1 :: domFunction
// *****************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
// GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html
//******************************************************
//DOM-ready watcher
function domFunction(f, a)
{
//initialise the counter
var n = 0;
//start the timer
var t = setInterval(function()
{
//continue flag indicates whether to continue to the next iteration
//assume that we are going unless specified otherwise
var c = true;
//increase the counter
n++;
//if DOM methods are supported, and the body element exists
//(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
//in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
if(typeof document.getElementsByTagName != 'undefined' && (document.getElementsByTagName('body')[0] != null || document.body != null))
{
//set the continue flag to false
//because other things being equal, we're not going to continue
c = false;
//but ... if the arguments object is there
if(typeof a == 'object')
{
//iterate through the object
for(var i in a)
{
//if its value is "id" and the element with the given ID doesn't exist
//or its value is "tag" and the specified collection has no members
if
(
(a[i] == 'id' && document.getElementById(i) == null)
||
(a[i] == 'tag' && document.getElementsByTagName(i).length < 1)
)
{
//set the continue flag back to true
//because a specific element or collection doesn't exist
c = true;
//no need to finish this loop
break;
}
}
}
//if we're not continuing
//we can call the argument function and clear the timer
if(!c) { f(); clearInterval(t); }
}
//if the timer has reached 60 (so timeout after 15 seconds)
//in practise, I've never seen this take longer than 7 iterations [in kde 3
//in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
if(n >= 60)
{
//clear the timer
clearInterval(t);
}
}, 250);
};
页面使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>domFunction</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- domFunction constructor by brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="domFunction.js"></script>
<script type="text/javascript">
/*
function myFunction()
{
alert("The DOM is ready");
};
var foobar = new domFunction(myFunction, { 'h1' : 'tag'});
*/
var foobar = new domFunction(function()
{
alert("The DOM is ready");
}, { 'h1' : 'tag' });
</script>
</head>
<body>
<h1>domFunction</h1>
</body>
</html>
很容易理解,作者还有一个简易版本,不过不能检查到某个特定元素,叫domReady.js
// DR1.0 :: domReady
// *****************************************************
// DOM scripting by brothercake -- http://www.brothercake.com/
// GNU Lesser General Public License -- http://www.gnu.org/licenses/lgpl.html
//******************************************************
//DOM-ready watcher
function domReady()
{
//start or increment the counter
this.n = typeof this.n == 'undefined' ? 0 : this.n + 1;
//if DOM methods are supported, and the body element exists
//(using a double-check including document.body, for the benefit of older moz builds [eg ns7.1]
//in which getElementsByTagName('body')[0] is undefined, unless this script is in the body section)
//>>> and any elements the script is going to manipulate exist
if
(
typeof document.getElementsByTagName != 'undefined'
&& (document.getElementsByTagName('body')[0] != null || document.body != null)
//>>> && document.getElementById('something') != null
)
{
//>>>-- DOM SCRIPTING GOES HERE --<<<
alert("The DOM is ready!");
//>>>-----------------------------<<<
}
//otherwise if we haven't reached 60 (so timeout after 15 seconds)
//in practise, I've never seen this take longer than 7 iterations [in kde 3.2.2
//in second place was IE6, which takes 2 or 3 iterations roughly 5% of the time]
else if(this.n < 60)
{
//restart the watcher
//using the syntax ('domReady()', n) rather than (domReady, n)
//because the latter doesn't work in Safari 1.0
setTimeout('domReady()', 250);
}
};
//start the watcher
domReady();
页面使用:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>domReady</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="domReady.js"></script>
</head>
<body>
</body>
</html>