javascript之DOMReady
DOMReady实现策略
* 在页面的DOM树创建完成后（即HTML解析第一步完成）就触发，而无需等待其他资源的加载，即DOMReady实现策略
* 支持DOMContentLoaded事件的浏览器: 就使用DOMContentLoaded事件
* 不支持DOMContentLoaded事件的浏览器: 使用Hack兼容
* 通过IE中的document.documentElement.doScroll('left')来判断DOM树是否创建完毕
代码实现
function myReady(fn){
if(document.addEventListener){
document.addEventListener('DOMContentLoaded',fn,false);
}else{//低版本浏览器
IEContentLoaded(fn);
}
//IE模拟DOMContentLoaded
function IEContentLoaded(fn){
var d = window.document;
var done = false;
//值执行一次用户的回调函数init();
var init = function(){
if(!done){
done = true;
fn();
}
};
(function(){
try{
//DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
}catch(e){
//延迟在试一次，
//var func = function() { alert(func === arguments.callee);}func();
//执行上述代码，可以看到alter出来的结果是true，注意，此处用的是“===”，就是说func与arguments.callee对象类型和值都相等。
setTimeout(arguments.callee,50);
return;
}
init();
})();
//监听document的加载状态
d.onreadystatechange = function(){
//如果用户是在domReady之后绑定的函数，就立马执行
if(d.readyState == 'complete'){
d.onreadystatechange = null;
init();
}
}
}
}
为什么使用domReady来代替onload？
* onload是需要等待页面所有资源都加载完毕，才触发
* domReady是DOM加载完就触发
我们下面看个例子
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>domReady</title>
<script src="domReady.js"></script>
</head>
<body>
<div id="showMsg"></div>
<div>
<img src="data:images/1.jpg"/>
<img src="data:images/2.jpg"/>
<img src="data:images/3.jpg"/>
</div>
<script>
var d = document;
var msgBox = d.getElementById('showMsg');
var imgs = d.getElementsByTagName('img');
var time1 = null,time2 = null;
myReady(function(){
msgBox.innerHTML += "dom已加载！<br>";
time1 = new Date().getTime();
msgBox.innerHTML += "时间戳:" + time1 + "<br>";
});
window.onload = function(){
msgBox.innerHTML += "onload已加载！<br>";
time2 = new Date().getTime();
msgBox.innerHTML += "时间戳:" + time2 + "<br>";
msgBox.innerHTML += "domReady比onload快" + (time2 - time1) + "ms<br>";
};
</script>
</body>
</html>
javascript之DOMReady的更多相关文章
- JavaScript DOM-Ready 机制
IE9开始和其他现代浏览器可以通过绑定DOMContentLoaded事件:IE9之前的的浏览器需要绑定onreadystatechange事件并等待readyState为"complete ...
- domReady的兼容性实现方法
一.为何要实现domReay方法? 举例: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- html dom的加载
操作HTML DOM文档的一个难题是,你的JavaScript代码可能在DOM完全载入之前运行,这会导致你的代码产生一些问题.页面加载时浏览器内部操作的顺序大致是这样的: 1. HTML被解析. 2. ...
- -_-#【Dom Ready / Dom Load】
Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...
- QQ浏览器等window.innerHeight首次读取的高度不正确的解决办法
问题描述 移动端的页面,需要处理首屏为一满屏.并且,采用javascript计算高度来设置容器高度的方案. <!DOCTYPE html> <html> <head> ...
- 深入浅出DOM基础——《DOM探索之基础详解篇》学习笔记
来源于:https://github.com/jawil/blog/issues/9 之前通过深入学习DOM的相关知识,看了慕课网DOM探索之基础详解篇这个视频(在最近看第三遍的时候,准备记录一点东西 ...
- 解决window.onload延迟加载问题
window.onload方法,表示当页面所有的元素都加载完毕,并且所有要请求的资源也加载完毕才触发执行function这个匿名函数里边的具体内容.这样肯定保证了代码在domReady之后执行.使用w ...
- 谈谈DOMContentLoaded：Javascript中的domReady引入机制
一.扯淡部分 回想当年,在摆脱写页面时js全靠从各种DEMO中copy出来然后东拼西凑的幽暗岁月之后,毅然决然地打算放弃这种处处“拿来主义”的不正之风,然后开启通往高大上的“前端攻城狮”的飞升之旅.想 ...
- JavaScript进阶之路——认识和使用Promise，重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
随机推荐
- iOS开发——实用篇&提高iOS开发效率的方法和工具
提高iOS开发效率的方法和工具 介绍 这篇文章主要是介绍一下我在iOS开发中使用到的一些可以提升开发效率的方法和工具. IDE 首先要说的肯定是IDE了,说到IDE,Xcode不能跑,当然你也可能同时 ...
- 修改mac os分辨率（VMware）
转自:http://hi.baidu.com/hehonglei123/item/55591c17e7991d582a3e22a1 1. 在Mac系统中安装VMsvga2:VMsvga2_v1.2.3 ...
- 苹果开发工具：Xcode和Interface Builder
摘要:在Mac OS X上开发,首选Xcode继承开发环境.本文对开发工具套件中最重要的Xcode和Interface Builder两个工具做了简要介绍,并提供<苹果开发工具概述>PDF ...
- 项目源码--Android3D影音播放器源码
下载源码 技术要点: 1.本地音乐管理 2.音频流的解码 3. UI控件的综合使用 4. 视频流的解码 5. 动态更换皮肤 6. 3D效果的实现 7. 源码带详细的中文注释 ...... 详细 ...
- Android基本控件之Menus
在我们的手机中有很多样式的菜单,比如:我们的短信界面,每条短信,我们长按都会出现一个菜单,还有很多的种类.那么现在,我们就来详细的讨论一下安卓中的菜单 Android的控件中就有这么一个,叫做Menu ...
- python之装饰器详解
这几天翻看python语法,看到装饰器这里着实卡了一阵,最初认为也就是个函数指针的用法,但仔细研究后发现,不止这么简单. 首先很多资料将装饰器定义为AOP的范畴,也就是Aspect Oriented ...
- Java基础知识强化101：Java 中的 String对象真的不可变吗 ?
1. 什么是不可变对象? 众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对 ...
- linux云计算集群架构学习笔记:用户管理和root用户密码重置
RHEL7用户管理 本节所讲内容: 用户和组的相关配置文件 管理用户和组 RHEL7破解root密码 与windows 相比 LINUX中的用户和账号的作用是一样的. 都是基于用户对访问的资源做控制, ...
- XP下Winform背景透明问题
win 7上usercontrol控件背景色设置为透明,显示无异常.到XP上一看,变成Control颜色了,即常见的灰色.网上搜了一堆,没发现有用的.偶然看到XP上Label的背景色可以透明,于是用L ...
- nodejs3-事件zepto.js事件
Event代表事件名,listener代表事件处理函数,括号内的参数代表可选参数: addListener(event,listener):对指定事件绑定事件处理函数 on(同上):addListen ...