domReady的实现
我们都知道JQ的 $(document).ready(fn) 方法。可以在页面准备就绪后才执行脚本,该方法相比传统的window.onload 事件,它的优势体现于onload事件是需要等到页面中所有资源都加载完毕后才会触发,而JQ的ready方法则会判断DOM树是否构建完毕。
onload相比较onreadystate事件的区别是,onreadystatechange事件是IE独有的,并且在IE11之后不再支持,该事件是IE浏览器为特定的需要判断资源加载的DOM元素指定的事件。
支持onreadystatechange事件的DOM元素必然有一个readyState属性,该属性的返回值,用于说明资源的加载情况。
一般而言,onreadystatechange事件更多用于Iframe的加载判断。
最后我们需要了解的是当页面包含iframe后,DOM树的生成,以及DOMContentLoaded事件的触发,onload事件的触发,其流程对于IE非IE是不同的。
一般来说:
IE :解析index页面 -> 解析iframe页面 -> 触发iframe的DOMContentLoaded事件 -> 触发iframe页面 onload事件 -> 触发Index页面的DOMContentLoaded事件 -> 触发index页面的onload事件。
!IE : 解析index页面 -> 触发index页面的DOMContentLoaded事件 -> 解析iframe页面 -> 触发iframe页面的DOMContentLoaded事件 -> 触发iframe的onload事件 -> 触发index页面的onload事件。
从这个流程,我们可以看出IE中,必须等待当前页面的iframe加载解析完毕,当前页面才能加载解析完毕,而在非IE中,iframe的加载与解析对当前页面来言更多的是异步执行。
下面是具体的代码:
(function(win){ 'use strict'; var document = win.document,
readList = [], // 等待执行的函数堆栈
flag = false; var removeEvent = function(){ if(document.addEventListenner){
window.removeEventListenner('load',handle,false);
}else if(document.attachEvent){
window.detachEvent('onload',handle)
document.detachEvent('onreadystatechange',readyState);
}else{
window.onload = null;
} },
handle = function(){ if(!flag){ while(readList.length){
readList[0].call(); //执行函数
readList.shift(); //删除第一个数组元素
}
flag = true;
removeEvent();
} },
readyState = function(){
if(document.readyState == 'complete'){
handle();
}
},
DOMContentloaded=function(){ if(document.readyState == 'complete'){
setTimeout(handle); // setTimeout 会使用最短时间,该时间不同系统并不一样。
}else if(document.addEventListenner){
document.addEventListenner('DOMContentLoaded',fn,false);
window.addEventListenner('load',handle,false);
}else if(document.attachEvent){
window.attachEvent('onload',handle);
document.attachEvent('onreadystatechange',readyState); //onreadystatechange 事件在页面中含有iframe的时候,它会等待iframe加载完毕才会触发。 if(self === self.top){ // 当页面不在iframe中则使用此种方式检测doScroll方法是否可用。如果再iframe中则用onreadstatechange事件进行判断。
(function(){
try{
document.documentElement.doScroll('left');
}catch(e){
setTimeout(arguments.callee,50); //arguments.callee 是对当前函数的引用。
return ;
}
handle();
}());
} }else{
window.onload = handle;
}
},
ready = function(fn){
readList.push(fn); // 加入待处理的堆栈中。
DOMContentloaded();
}; win.domReady = ready; }(window));
代码调用:
domReady(function(){
document.getElementById('box').innerHTML = (new Date().getTime() - date)/1000;
});
domReady的实现的更多相关文章
- 谈谈DOMContentLoaded:Javascript中的domReady引入机制
一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...
- understand dojo/domReady!
require(["dojo/dom", "dojo/domReady!"], function(dom){ dom.byId("helloworld ...
- [转] 主流JS框架中DOMReady事件的实现
在实际应用中,我们经常会遇到这样的场景,当页面加载完成后去做一些事情:绑定事件.DOM操作某些结点等.原来比较常用的是window的onload 事件,而该事件的实际效果是:当页面解析/DOM树建立完 ...
- domReady方法(dom加载完成执行回调)
var domReady = function( fn ) { var isReady = false, ready = function(){ if(!isReady){ typeof fn === ...
- IE9或以上的浏览器flash值为空时,导致domready不触发
在前些时间开发中遇到一个问题当flash值<param name="movie" value=""/>为空时,IE版本>=9不会触发domre ...
- 第二课:判断js变量的类型以及domReady的原理
1.类型的判断: js五种简单数据类型有:null,undefined,boolean,number,string. 还有复杂的数据类型:Object,Function,RegExp,Date,自定义 ...
- jQuery的domReady
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript之DOMReady
DOMReady实现策略 * 在页面的DOM树创建完成后(即HTML解析第一步完成)就触发,而无需等待其他资源的加载,即DOMReady实现策略 * 支持DOMContentLoaded事 ...
- domReady source code, domready源码
domready源码,domready实现代码,js实现domready的源代码. jquery的domready源码,require.js的domready源代码 . [domReady sourc ...
随机推荐
- Web APi之认证(Authentication)两种实现方式【二】(十三)
前言 上一节我们详细讲解了认证及其基本信息,这一节我们通过两种不同方式来实现认证,并且分析如何合理的利用这两种方式,文中涉及到的基础知识,请参看上一篇文中,就不再叙述废话. 序言 对于所谓的认证说到底 ...
- LeetCode[3] Longest Substring Without Repeating Characters
题目描述 Given a string, find the length of the longest substring without repeating characters. For exam ...
- Spring的数据库开发
Spring JDBC框架操作mysql数据库 Spring中的JDBC为我们省去连接和关闭数据库的代码,我们着重关注对数据库的操作.Sprin ...
- nodejs利用ajax实现网页无刷新上传图片
nodejs利用ajax实现网页无刷新上传图片 标签(空格分隔): nodejs 通常情况下上传图片是要通过提交form表单来实现的,但是这又不可避免的产生了网页转. 利用ajax技术和FormDat ...
- C# await和async
基础阅读:http://www.cnblogs.com/jesse2013/p/async-and-await.html 答疑阅读:http://www.cnblogs.com/heyuquan/ar ...
- ASP.NET Core 中文文档 第四章 MVC(4.3)过滤器
原文:Filters 作者:Steve Smith 翻译:刘怡(AlexLEWIS) 校对:何镇汐 ASP.NET MVC 过滤器 可在执行管道的前后特定阶段执行代码.过滤器可以配置为全局有效.仅对控 ...
- continue break 区别
在循环中有两种循环方式 continue , break continue 只是跳出本次循环, 不在继续往下走, 还是开始下一次循环 break 将会跳出整个循环, 此循环将会被终止 count = ...
- 超全面的.NET GDI+图形图像编程教程
本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...
- 自定义ConfigSection
CCustom configuration section with intelisense
- linux常用命令(2)pwd命令
pwd 命令1 命令格式:pwd [选项]2 命令功能查看当前工作目录的完整路径3 常用参数一般不带任何参数如果目录是链接时:pwd -P 显示实际路径,而非使用链接路径4 常用实例:4.1 用pwd ...