`
xiaoych
  • 浏览: 145999 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

可以在某些场合替代onload事件的domReady事件

阅读更多
    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 楼 blacklong 2012-08-23  
good,找了好几个,就你这个好使~~~
1 楼 esteem 2008-08-22  
呵呵 这个东西好 谢谢 解决了我个问题

相关推荐

    js的image onload事件使用遇到的问题

    2. 图片的尺寸获取:在onload事件处理程序中,可以通过访问Image对象的height和width属性来获取图片的实际尺寸。这对于图片自适应布局或是计算其他布局参数是很有帮助的。 3. 缓存对onload事件的影响:浏览器缓存...

    javaScript的onload事件例子

    javaScript的onload事件的代码,javaScript内嵌在html中。

    脱离document.onload和window.onload的onload事件

    脱离document.onload和window.onload的onload事件,可多次添加加载事件!

    一些主流JS框架中DOMReady事件的实现小结

    window.onload事件是等整个页面完全加载完成后才会触发,这包括所有图片、脚本、样式表、iframe等资源,通常会较晚触发,而DOMContentLoaded仅需DOM树构建完成即可触发,这使得开发者可以在不影响用户体验的情况下,...

    JQuery-- onload,ready方法详细解说

    这种方式可以在页面加载之前执行某些操作,但需要注意顺序问题。 JQuery 的 onload 和 ready 方法都是在页面加载完成后触发的事件,但是它们之间有着一定的区别。在实际开发中,我们需要根据实际情况选择使用哪种...

    js onload事件不起作用示例分析

    或者,如果确实需要保留原有的onload处理器,并且要添加新的处理器,可以在页面的JavaScript代码中这样写: ```javascript window.onload = function() { sorttable.init(); // 假设这是原有的处理器 ...

    ie中 body onload 和 window onload 解决法案

    在网页开发中,`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数,用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前,页面的所有资源(包括HTML、CSS、JavaScript、...

    js的onload事件及初始化按钮事件示例代码

    JavaScript中的`onload`事件是网页或特定元素加载完成后触发的事件,主要用于执行某些操作,如显示内容、执行脚本等。这个事件在多种HTML标签上都可用,包括`&lt;body&gt;`、`&lt;frame&gt;`、`&lt;frameset&gt;`、`&lt;iframe&gt;`、`&lt;img&gt;`...

    前端项目-domready.zip

    1. **原生DOMContentLoaded事件**:在JavaScript中,可以直接监听DOMContentLoaded事件,当DOM结构加载完毕,但不等待所有资源加载完成后,该事件会被触发。这比等待window.onload事件更快,因为它不会等待图片和...

    javaScript常用事件命令

    例如,在图片上添加 ondblclick 事件,可以在双击图片时执行某些操作。 onfocus 事件 onfocus 事件是在表单元素中,当元素获得焦点时执行的事件。例如,在输入框中,当焦点移到输入框时,onfocus 事件将被触发。 ...

    img的onload的另类用法

    例如,我们可以使用onload事件来显示图片的加载进度,或者在图片加载完成时执行某些操作。 然而,onload事件不仅仅局限于图片的加载完成,还有许多其他的用法。例如,在AJAX开发中,我们可以使用onload事件来加载...

    js之onload事件的一点使用心得

    比如,在一些动态加载内容的Web应用中,可能需要在页面的DOM结构完全加载后再进行DOM操作,这时就可以利用onload事件。此外,页面上可能还会有AJAX请求,通常我们也会在onload事件中进行这些异步请求的执行,以确保...

    微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。   //app.js App({ onLaunch: ...

    ie 处理 gif动画 的onload 事件的一个 bug

    IE浏览器在处理GIF动画的onload...该bug是IE浏览器在处理GIF动画的onload事件时存在的一个bug,可以通过在onload事件函数中,将onload事件设置为null来解决。同时,静态GIF、JPG、BMP等其他格式的图片不会出现这个bug。

    requirejs-domready-2.0.1-1.zip

    DOMReady 插件则是 RequireJS 的一个补充,它允许开发者在DOM完全准备就绪后才执行代码,避免了传统 `window.onload` 或 `document.DOMContentLoaded` 事件可能存在的延迟问题。 【描述】中的 "jamppa.zip" 指的是 ...

    IE中图片的onload事件无效问题和解决方法

    在某些情况下,如果图片是从缓存中直接加载的,而不是从服务器重新请求,`onload`事件可能不会按照预期触发。这是因为IE在加载缓存图片时的速度非常快,可能会在设置`onload`事件处理器之前就已经完成了加载,导致...

    img onload事件绑定各浏览器均可执行

    `onload`事件是JavaScript中用于监听一个元素加载完成的事件,特别是在处理图片时非常常见。本文主要探讨的是在不同浏览器环境下,如何正确地对`img`标签使用`onload`事件进行绑定。 通常,开发者会尝试以下方式对`...

    把多个JavaScript函数绑定到onload事件处理函数上的方法

    在JavaScript编程中,确保函数在页面完全加载之后执行是非常常见的需求,这通常通过将函数绑定到`window.onload`事件来实现。当`window.onload`事件触发时,绑定的函数会被调用,以此来确保所有资源(如图片、脚本等...

    仅img元素创建后不添加到文档中会执行onload事件的解决方法

    通常情况下,当一个`&lt;img&gt;`标签在页面加载时,浏览器会自动触发`onload`事件,该事件在图片完全加载后被激活,允许开发者执行某些操作,如调整图片大小、显示隐藏元素等。然而,在某些情况下,如果`&lt;img&gt;`元素通过...

    IE浏览器中图片onload事件无效的解决方法

    这个问题在描述中已经得到了体现,即在某些情况下,IE浏览器不会触发图片的`onload`事件,导致图片加载完成后无法执行预期的清理或更新操作。 在给定的示例中,开发者遇到的问题是在图片加载时,应该在图片加载完成...

Global site tag (gtag.js) - Google Analytics