`
backspace
  • 浏览: 137112 次
文章分类
社区版块
存档分类
最新评论

jQuery DOMready 页面加载事件 研究

 
阅读更多

jQuery中的ready事件原型,在这里提取出来便于理解,代码+注释 如下:

    // 事件队列
    var EventQueue = null;
    // 是否已经执行过了,只执行一次
    var isFire = false;
    //添加ready事件
    function addReadyEvent(fn){
        if(!EventQueue) EventQueue = [];
        if(document.readyState == 'complete'){
            fn();
        }else{
            EventQueue.push(fn);
        }
    }
    // 触发ready事件
    function fireReadyEvent(){
        if(!isFire){
            var fn,i=0;
            if(EventQueue){
                while(fn = EventQueue[i]){
                    fn();
                    i++;
                }
                EventQueue = null;
            }
            isFire = true;
        }
    }
    // 绑定ready事件
    function bindReady(){
        if(document.addEventListener){
            // 标准浏览器DOM加载完毕后执行队列,并卸载事件
            document.addEventListener('DOMContentLoaded',unbindReady,false);
            // 确保会执行
            window.addEventListener('load',fireReadyEvent,false);
        }else if(document.attachEvent){
            // IE浏览器加载事件变化的时候执行unbindReady
            document.attachEvent('onreadystatechange',unbindReady);
            // 确保会执行
            window.attachEvent('onload',fireReadyEvent);
        }

        var toplevel = false; // 是否顶层对象

        try {
            toplevel = window.frameElement == null;
        } catch(e) {}

        if ( document.documentElement.doScroll && toplevel ) {
            // IE通过判断doScroll,在onreadystatechange = 'complete' 之前执行
            doScrollCheck();
        }
    }

    function doScrollCheck() {
        if ( isFire ) {
            return;
        }

        try {
            // IE下加载BODY后即可正常执行doScroll()
            document.documentElement.doScroll("left");
        } catch( error ) {
            // 循环执行doScroll
            setTimeout( doScrollCheck, 1 );
            return;
        }

        // doScroll成功后执行队列
        fireReadyEvent();
    }

    // 移除绑定事件并执行队列
    function unbindReady(){
        if(document.addEventListener){
            //标准浏览器支持DOMContentLoaded事件
            document.removeEventListener('DOMContentLoaded',unbindReady,false);
            fireReadyEvent();
        }else if(document.attachEvent){
            if(document.readyState === 'complete'){
                // IE浏览器支持complete事件
                document.detachEvent('onreadystatechange',unbindReady);
                fireReadyEvent();
            }
        }
    }

    bindReady();
    window.onload = function(){
        console.log('LOAD加载完毕!');
    }

    addReadyEvent(function(){
        console.log('DOM加载完毕1!');
    });
    addReadyEvent(function(){
        console.log('DOM加载完毕22!');
    })
    addReadyEvent(function(){
        console.log('DOM加载完毕33!');
    })

 

分享到:
评论

相关推荐

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

    3. 对于Internet Explorer,使用document.write()向页面中添加一个带有defer属性的script元素,并通过该script元素加载完成来模拟DOMContentLoaded事件。 Prototype的实现方式虽然具有兼容性,但也存在一些问题。...

    前端项目-domready.zip

    理解并掌握DOMReady的原理和使用,对于优化用户体验、提升页面加载速度具有重大意义。本文将深入探讨“前端项目-domready.zip”这个压缩包中所包含的现代DOMReady实现,并分析其在实际项目中的应用。 首先,...

    jquery实现115网盘首页.zip

    首先,jQuery在页面加载完成后的DOMReady事件处理中扮演了核心角色。通过`$(document).ready(function() {...})`或简写形式`$(function() {...})`,开发者可以确保在执行任何操作之前,HTML文档已经完全加载并解析。...

    35个经典Jquery实例方法

    以上只是35个经典实例的一部分,实际文档可能包括更多如表单操作、DOMReady事件、事件代理等内容。通过学习和实践这些实例,你将能更熟练地使用jQuery,提高开发效率,同时提升页面交互的用户体验。对于初学者来说,...

    有缩略图的jQuery相册代码.rar

    10. **扩展与自定义**:一个好的jQuery相册插件应该具有良好的可扩展性,允许开发者根据需求添加自定义功能,如分页、幻灯片播放、图片懒加载等。 以上是对"有缩略图的jQuery相册代码"项目的主要知识点分析,实际...

    jQuery源码分析之Event事件分析

    总结以上,jQuery通过事件包装、扩展原生事件处理函数及处理domReady状态,巧妙地解决了各种浏览器的兼容性问题,并为开发人员提供了一个高效、一致的事件处理机制。在深入理解了jQuery的这些机制后,开发者可以更加...

    domReady的实现案例

    `domReady`是一个JavaScript编程中的常见概念,它指的是在网页的文档对象模型(Document Object Model,简称DOM)加载完成但...通过理解`domReady`的工作原理和实现方式,开发者能够更有效地控制页面加载时的脚本执行。

    jquery插件

    - **代码优化**:压缩和合并JavaScript文件,减少HTTP请求,提高页面加载速度。 - **性能考虑**:避免在DOMReady事件中进行不必要的操作,利用事件委托优化性能。 - **错误处理**:提供良好的错误处理机制,便于调试...

    一周学会Mootools 1.4中文教程(3)事件

    需要注意的是,`load`事件在整个页面中只能被添加一次,而`domready`事件可以多次添加,这在某些场景下可能会带来便利。 #### 结语 Mootools 1.4的事件处理机制不仅强大而且灵活,为开发者提供了丰富的工具来创建...

    JQuery面试题1共5页.pdf.zip

    - 如何在页面上同时使用jQuery和其他JavaScript库,如AngularJS、React等,了解`$.noConflict()`的作用。 以上内容涵盖了jQuery面试中可能涉及的主要知识点,深入理解和熟练掌握这些内容,将有助于你在面试中展现...

    JS DOMReady事件的六种实现方法总结

    - 在包含iframe的页面中,使用`document.write`和`defer`的方式可能会等到iframe内容加载完后才触发事件,与`onload`事件无异。 - Webkit新版本支持`DOMContentLoaded`事件,所以这部分代码可以优化。 2. **...

    jQuery网页右侧广告跟随滚动代码分享

    1. 此方法采用jQuery来实现广告的浮动效果,利用了DOMReady事件确保在文档完全加载之后执行。 2. 详细步骤解析: - 通过jQuery选择器获取浮动广告对象$sidebar以及窗口对象$window,同时获取浮动广告相对于文档...

    jQuery之$(document).ready()使用介绍

    这一函数是管理页面加载顺序和时机的核心部分,它确保了页面的DOM元素完全加载并可被脚本操作之后,才执行包裹在其中的代码。 ### 知识点:jQuery的$(document).ready()函数 #### 1. DOM加载时机和重要性 DOM...

    javascript优先加载笔记代码

    在现代网页开发中,页面加载速度是一个非常关键的因素,它直接关系到用户体验。传统的JavaScript代码在页面加载完成后执行,这可能会在很大程度上影响页面的渲染效率,特别是在包含大量JavaScript脚本的页面中。...

    使用本地js替换jquery

    转换到原生JS的好处包括减少页面加载时间,提高性能,以及更好地理解和控制代码。同时,随着Web组件和模块化的发展,原生JS的灵活性和可维护性也变得更为重要。 在实践过程中,我们可以创建一个小型的工具库,包含...

    dojo jqurey 技术

    在Dojo 1.7.2版本中,开发者可以发现这个版本相较于之前的版本进行了优化,删除了一些冗余的JavaScript文件,这有助于减少代码体积,提高页面加载速度,并使得整个库更加轻量化。 Dojo的模块化系统(AMD,...

    Dom加载让图片加载完再执行的脚本代码

    然而,如果图片或其他资源还未加载完成,使用`window.onload`事件可能会延迟脚本的执行,导致用户体验下降。特别是当页面包含大量图片时,用户可能会在DOM加载完成后就开始浏览,但此时依赖`window.onload`触发的...

    domino xpages js动态加载

    动态加载JavaScript意味着在页面加载时并不立即执行所有的脚本,而是根据需要按需加载。这样可以提高页面性能,减少初始加载时间,同时还能降低网络带宽的消耗。 例如,`<xp:scriptBlock>`是XPages中的一个组件,...

Global site tag (gtag.js) - Google Analytics