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

silencezwm 发布于2019-08-22 11:02 / 545人阅读

摘要：事件详细研究边界事件外链样式在某些浏览器下面会影响脚本的加载。事件和事件是同时的。这就是要监听页面的事件，当事件为时就可以开始做的事情了。

页面加载状态

$(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()+"
";
            } 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事件的关系

云服务器 GPU云服务器 load事件前端技能前端技能树前端开发技能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91652.html

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

摘要：事件详细研究边界事件外链样式在某些浏览器下面会影响脚本的加载。事件和事件是同时的。这就是要监听页面的事件，当事件为时就可以开始做的事情了。页面加载状态 $(document).ready() $(function(){}) 这两个是我们在页面初始化时经常使用的监听方案，那么他的实际的执行关系时什么样的呢？在原生js中是什么样的一种表现？以下我会一而再再而三的写DOMConten...

lpjustdoit 2019-08-01 15:33 评论0 收藏0
前端Tank技能---浏览器嗅探

摘要：由于那个时候是霸主，这也导致微软推出的时候必须把自己伪装成浏览器，于是他们的也是以开头的。各个版本典型的如下其中之后的就是当前的版本号。的几个版本的其中之后的是版本号提供了专门的浏览器标志，就是属性。目前，的是其中，版本号在之后的数字。浏览器嗅探浏览器嗅探不用说了，为了更好的性能，会需要各种各样的兼容性处理，自然就会有针对不同浏览器的判断.一般的代码中，我们都是通过navigato...

Blackjun 2019-08-19 18:32 评论0 收藏0
前端Tank技能---模块化加载器的简单实现

摘要：抛开一直写的那个不讲，我们说的是一个简单的模块加载器的简单实现。非常好实现，忽略不提。是第一个冒出来的，但是，一般提到他都会是弃用的，会有安全的漏洞更好的方案是构造器。什么是模块化，为什么要模块化装个b，贴一段English A beginning programmer writes her programs like an ant builds her hill, one pie...

ShevaKuilin 2019-08-19 18:31 评论0 收藏0
前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
threejs构建web三维视图入门教程

摘要：本文是一篇简单的构建三维视图的入门教程，你可以了解到利用创建简单的三维图形，并且控制图形运动。然后将其加入到中。三创建对象大多数时候，我们需要讲绘制的图形整合到一起进行控制。在轴上运动的完整代码这个入门教程就到这里了，感谢阅读。本文是一篇简单的webGL+threejs构建web三维视图的入门教程，你可以了解到利用threejs创建简单的三维图形，并且控制图形运动。若有不足，欢迎指出...

Profeel 2019-08-21 10:43 评论0 收藏0