load事件可以安全的执行JS,因为该事件是在页面完全加载完后才开始执行(包括页面内的图片、flash等所有元素),不会因为JS需要对某个DOM操作,而页面还没有加载该节点而引起错误。但是这种安全是需要付出代价的:如果某些图片(或者一些别的东西)加载特别慢,那么load事件会等到很久之后才会触发。
针对这个问题,一些JS框架提供了一些补充方法。如:jquery的$(document).ready()、mootools的domready事件。都是在页面的DOM加载完毕后立即执行,而不需要等待漫长的图片下载过程。
如果不使用这些框架,怎样实现自己的 document ready呢?请看以下一段代码:
function __clear(timer){
clearTimeout(timer);
clearInterval(timer);
return null;
};
function __attach_event(evt, callback) {
if (window.addEventListener) {
window.addEventListener(evt, callback, false);
} else if (window.attachEvent) {
window.attachEvent("on" + evt, callback);
}
}
function __domReady(f) {
// 假如 DOM 已经加载,马上执行函数
if (__domReady.done) return f();
// 假如我们已经增加了一个函数
if (__domReady.timer) {
// 把它加入待执行函数清单中
__domReady.ready.push(f);
} else {
// 为页面加载完毕绑定一个事件,
// 以防它最先完成。使用addEvent(该函数见下一章)。
__attach_event("load", __isDOMReady);
// 初始化待执行函数的数组
__domReady.ready = [f];
// 尽可能快地检查DOM是否已可用
__domReady.timer = setInterval(__isDOMReady, 100);
}
}
function __isDOMReady() {
// 如果我们能判断出DOM已可用,忽略
if (__domReady.done) return false;
// 检查若干函数和元素是否可用
if (document && document.getElementsByTagName && document.getElementById && document.body) {
// 如果可用,我们可以停止检查
__clear(__domReady.timer);
__domReady.timer = null;
// 执行所有正等待的函数
for ( var i = 0; i < __domReady.ready.length; i++ ) {
__domReady.ready[i]();
}
// 记录我们在此已经完成
__domReady.ready = null;
__domReady.done = true;
}
}
具体的调用方法:
__domReady(function() {
alert("The dom is loaded!");
});
分享到:
相关推荐
2. 图片的尺寸获取:在onload事件处理程序中,可以通过访问Image对象的height和width属性来获取图片的实际尺寸。这对于图片自适应布局或是计算其他布局参数是很有帮助的。 3. 缓存对onload事件的影响:浏览器缓存...
javaScript的onload事件的代码,javaScript内嵌在html中。
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
window.onload事件是等整个页面完全加载完成后才会触发,这包括所有图片、脚本、样式表、iframe等资源,通常会较晚触发,而DOMContentLoaded仅需DOM树构建完成即可触发,这使得开发者可以在不影响用户体验的情况下,...
这种方式可以在页面加载之前执行某些操作,但需要注意顺序问题。 JQuery 的 onload 和 ready 方法都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。在实际开发中,我们需要根据实际情况选择使用哪种...
或者,如果确实需要保留原有的onload处理器,并且要添加新的处理器,可以在页面的JavaScript代码中这样写: ```javascript window.onload = function() { sorttable.init(); // 假设这是原有的处理器 ...
在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前,页面的所有资源(包括HTML、CSS、JavaScript、...
JavaScript中的`onload`事件是网页或特定元素加载完成后触发的事件,主要用于执行某些操作,如显示内容、执行脚本等。这个事件在多种HTML标签上都可用,包括`<body>`、`<frame>`、`<frameset>`、`<iframe>`、`<img>`...
1. **原生DOMContentLoaded事件**:在JavaScript中,可以直接监听DOMContentLoaded事件,当DOM结构加载完毕,但不等待所有资源加载完成后,该事件会被触发。这比等待window.onload事件更快,因为它不会等待图片和...
例如,在图片上添加 ondblclick 事件,可以在双击图片时执行某些操作。 onfocus 事件 onfocus 事件是在表单元素中,当元素获得焦点时执行的事件。例如,在输入框中,当焦点移到输入框时,onfocus 事件将被触发。 ...
例如,我们可以使用onload事件来显示图片的加载进度,或者在图片加载完成时执行某些操作。 然而,onload事件不仅仅局限于图片的加载完成,还有许多其他的用法。例如,在AJAX开发中,我们可以使用onload事件来加载...
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。 //app.js App({ onLaunch: ...
比如,在一些动态加载内容的Web应用中,可能需要在页面的DOM结构完全加载后再进行DOM操作,这时就可以利用onload事件。此外,页面上可能还会有AJAX请求,通常我们也会在onload事件中进行这些异步请求的执行,以确保...
IE浏览器在处理GIF动画的onload...该bug是IE浏览器在处理GIF动画的onload事件时存在的一个bug,可以通过在onload事件函数中,将onload事件设置为null来解决。同时,静态GIF、JPG、BMP等其他格式的图片不会出现这个bug。
DOMReady 插件则是 RequireJS 的一个补充,它允许开发者在DOM完全准备就绪后才执行代码,避免了传统 `window.onload` 或 `document.DOMContentLoaded` 事件可能存在的延迟问题。 【描述】中的 "jamppa.zip" 指的是 ...
在某些情况下,如果图片是从缓存中直接加载的,而不是从服务器重新请求,`onload`事件可能不会按照预期触发。这是因为IE在加载缓存图片时的速度非常快,可能会在设置`onload`事件处理器之前就已经完成了加载,导致...
`onload`事件是JavaScript中用于监听一个元素加载完成的事件,特别是在处理图片时非常常见。本文主要探讨的是在不同浏览器环境下,如何正确地对`img`标签使用`onload`事件进行绑定。 通常,开发者会尝试以下方式对`...
在JavaScript编程中,确保函数在页面完全加载之后执行是非常常见的需求,这通常通过将函数绑定到`window.onload`事件来实现。当`window.onload`事件触发时,绑定的函数会被调用,以此来确保所有资源(如图片、脚本等...
通常情况下,当一个`<img>`标签在页面加载时,浏览器会自动触发`onload`事件,该事件在图片完全加载后被激活,允许开发者执行某些操作,如调整图片大小、显示隐藏元素等。然而,在某些情况下,如果`<img>`元素通过...
这个问题在描述中已经得到了体现,即在某些情况下,IE浏览器不会触发图片的`onload`事件,导致图片加载完成后无法执行预期的清理或更新操作。 在给定的示例中,开发者遇到的问题是在图片加载时,应该在图片加载完成...