由于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>
分享到：
相关推荐
4. **替代 window.onload**： `window.onload` 通常用于确保页面完全加载后执行某些操作，但只允许一个回调。为了支持多个回调，可以创建一个兼容的函数： ```javascript function iLoad(func) { var oLoad = ...
在JavaScript和jQuery中，`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数，但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...
8. 替代方案：除了使用window.onload事件外，还有其他一些方法可以在页面加载完成后执行JavaScript代码，例如使用jQuery时可以使用`$(document).ready()`方法。此外，如果需要在所有资源加载完成后执行代码，可以...
在现代Web开发中，随着模块化和组件化开发模式的流行，类似于addLoadEvent这样的函数组织方式已经被许多现代JavaScript库或框架的生命周期钩子所替代。例如，在Vue.js或React中，你可以很轻松地在组件创建和挂载前后...
非IE浏览器可以使用`oninput`事件作为替代，但其适用范围更窄。以下是如何添加`onpropertychange`事件监听器的代码： ```javascript var addPropertyChangeEvent = function (obj, fn) { if (window.ActiveXObject...
在Web开发过程中，页面加载完成后的初始化操作是一项基本需求。通过JavaScript可以增加页面的交互性和...对于希望提升用户体验和页面性能的开发者而言，使用addLoadEvent函数替代中的onload事件是一种值得推荐的做法。
这种方法不仅能够解决window.onload被覆盖的问题，而且不需要修改现有的代码逻辑结构，非常适合在维护旧项目时使用。通过这样的方式，开发者可以继续保持现有的代码组织结构，同时解决因多个初始化处理器相互覆盖而...
jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在...通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
而window.onload是原生JavaScript中用于检测页面上所有资源加载完成的事件。两者的用法在很多情况下非常相似，但它们之间也存在一些关键的区别，以下就是$(document).ready()和window.onload的区别浅析。 1. 执行...
此外，随着现代JavaScript的发展，另一种常用的替代 `window.onload` 的方法是使用 `DOMContentLoaded` 事件，它会在DOM树加载完成，而不等待图片和其他外部资源时触发。如果你只需要操作DOM而不关心其他资源，`...
在这个例子中，`window.onload`函数确保了当整个页面加载完毕后，才执行添加事件监听器的代码。`document.addEventListener`用于监听`contextmenu`事件，当事件触发时，`event.preventDefault()`方法阻止了浏览器...
在上述代码中，`window.onload`函数会在整个页面加载完成后执行，找到ID为"myFlash"的Flash对象，并调用其`play()`方法来启动播放。同时，`<object>`标签中的`data`属性指定了SWF文件的路径，`width`和`height`设置...
jQuery 是一个广泛使用的 JavaScript 库，它提供了...不过，由于 `window.onload` 只能绑定一个处理函数，如果需要绑定多个加载后操作，可以使用 `window.addEventListener('load', function() {...})` 的形式来替代。
这段代码首先检查`event.x`是否存在，如果不存在，则使用`event.pageX`作为替代。 #### 六、事件源元素 在获取触发事件的源元素时，IE 使用`event.srcElement`，而 Firefox 使用`event.target`。为了保持代码的...
这意味着它比`window.onload`更快执行，因为它不依赖于所有内容的加载。`$(document).ready()`可以多次调用，而不会相互覆盖。 2. 相反，`window.onload`事件则在整个页面包括所有资源都加载完毕后触发。如果在页面...
由于`document.ready`先于`window.onload`执行，所以如果要在DOM加载完后立即显示加载器，而在所有资源加载完毕后再隐藏，可以使用定时器函数`setTimeout`来延迟调用隐藏加载器的函数。 具体到示例代码，通过`...
然而，在IE浏览器中，如果页面中有多个地方使用了window.onload事件，后面的代码会覆盖之前的代码，导致只有最后一次设置的回调函数能够被执行。 3. jQuery的$(document).ready() jQuery库提供了一个名为$(document...
由于 window.onload 一次只能绑定一个函数，因此这个替代函数允许开发者多次绑定多个函数，提高页面加载时的灵活性。 5. 获取下一个元素节点： 这个函数用于获取给定元素之后的下一个兄弟元素。它通过递归的方式...
这样，在不使用jQuery的环境下，我们依然能够处理页面加载完成的事件。下面，我们将详细探讨如何用纯JavaScript来实现这个功能。 ### JavaScript中实现document.ready功能的原理 在纯JavaScript中，我们可以使用`...