前端Tank技能---页面load事件分析

页面加载状态

$(document).ready()

$(function(){})

这两个是我们在页面初始化时经常使用的监听方案,那么他的实际的执行关系时什么样的呢?在原生js中是什么样的一种表现?

以下我会一而再再而三的写DOMContentLoaded,因为好多同学都没有怎么听说过这个事件

onload vs DOMContentLoaded

定义

onload:
当onload事件触发的时候,页面上的所有dom,样式表,脚本,图片,flash都已经加载完成了

DOMContentLoaded:
当DOMContentLoaded事件触发时,仅当dom加载完成,不包括样式表,图片,flash

光看定义,一目了然,哪个比较适合作为我们判断的标准:图片啊什么的,我们完全可以不用等。

DOMContentLoaded事件详细研究

DOMContentLoaded边界事件

外链样式在某些浏览器下面会影响脚本的加载。

在某些Gecko和Webkit引擎版本的浏览器里面,&&IE8在内,会同时发起多个http的请求并行加载样式表和脚步,但是脚本会等样式表加载完成之后才会被执行,甚至样式表加载之前页面都不会渲染。opera不会,样式表未加载好就可以执行js。

DOMContentLoaded兼容性

DOMContentLoaded事件兼容处理方案

由上可知,DOMContentLoaded事件在ie9以下是不支持的,那么惯例,我们要开始搞兼容处理方案
ie8及以下兼容处理方案
ie的一般处理方案

html加载过程中会有一个document.readyState状态

五种状态:
0(未初始化):还没有send
1 loading(载入):正在发送请求
2 loaded(载入完成):执行完成,已经接收到全部响应内容
3 interactive(交互): 正在解析响应内容
4 complete(完成): 响应内容解析完成,客户端可以用了。

complete事件和window.onload事件是同时的。

这就是要监听页面的readystatechange事件,当事件为interactive||complete时就可以开始做js的事情了。
带iframe的处理

但是当页面中带有iframe时,这个readyState状态会挂起一直等待,等待页面的iframe也加载完毕之后再处理,这个过程是我们不想要得,那就有另外一种处理方案

        (function doScrollCheck(){
            try{
                temp.doScroll('left');
                result += 'ie scroll' + (new Date()).getTime()+'\n';
            } catch(e){
                return setTimeout(doScrollCheck, 50);
            }
        }());

doScroll事件在页面加载完成之前是不能调用的,调用就失败了,可以用try catch的方法来完成

jQuery处理方案

基本上说清楚了,那么我们来看看jQuery是怎么搞的吧

        jQuery.ready.promise = function( obj ) {
            if ( !readyList ) {

                readyList = jQuery.Deferred();

                //如果执行到此处时,document.readyState已经是complete,就可以是ready了
                if ( document.readyState === "complete" ) {
                    setTimeout( jQuery.ready );
                
                //标准处理方案,DOMContentLoaded,一般浏览器都有的。
                } else if ( document.addEventListener ) {
                    //事件监听
                    document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

                    // 做个备份,不管怎么样,load事件时一定一定会执行的
                    window.addEventListener( "load", jQuery.ready, false );

                // ie处理方案
                } else {
                    //这个时间比doscroll事件快好多,他会在交互状态就触发,见demo2
                    document.attachEvent( "onreadystatechange", DOMContentLoaded );

                    // 还是备份
                    window.attachEvent( "onload", jQuery.ready );

                    // 且没有iframe的方案
                    var top = false;

                    try {
                        top = window.frameElement == null && document.documentElement;
                    } catch(e) {}

                    if ( top && top.doScroll ) {
                        (function doScrollCheck() {
                            if ( !jQuery.isReady ) {

                                try {
                                    
                                    top.doScroll("left");
                                } catch(e) {
                                    return setTimeout( doScrollCheck, 50 );
                                }
                                jQuery.ready();
                            }
                        })();
                    }
                }
            }
            return readyList.promise( obj );
        };

这就是我们常用的ready事件

敬请期待下期,defer sync 各种各种和loaded DOMContentLoaded事件的关系

    原文作者:tanklily
    原文地址: https://segmentfault.com/a/1190000006207030
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞