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年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
随机推荐
- css笔记16：盒子模型的入门案例
1.案例一: 效果图如下: (1)box1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- NODE编程（一）--Node功能的组织和重用
Node开发面对的两个问题: 1.如何组织代码 2.如何进行异步编程. 一.Node功能的组织和重用 Node模块允许你从被引入文件中选择要暴露给程序的函数和变量.如果模块返回的函数或变量不止一个,那 ...
- jboss之mod_cluster集群
本篇针对的mode_cluster版本是mod_cluster-1.2.6.Final-linux2-x64.tar.gz / mod_cluster-1.2.6.Final-windows-amd6 ...
- POJ 3069 Saruman's Army(贪心)
Saruman's Army Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Sub ...
- 关于Windows常用命令
本文引用自:http://ylbook.com/cms/computer/mingling.htm Windows Run命令: calc———–启动计算器certmgr.msc—-证书管理实用程序c ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Nginx - Windows 环境安装 Nginx
1. 访问 http://nginx.org/en/download.html,下载 Windows 版本的安装包 2. 解压安装包,双击 nginx.exe,启动 nginx 3. 访问 http: ...
- Git CMD - fetch: Download objects and refs from another repository
命令格式 git fetch [<options>] [<repository> [<refspec>…]] git fetch [<options> ...
- Ubuntu系统应用程序创建快捷方式的方法
大家安装了最新版的Ubuntu 14.0系统之后可能觉得很不习惯,因为Ubuntu的桌面干干净净没有任何快捷方式,任务栏的图标拖不下来,右键点击程序图标也没有创建快捷方式的菜单选项: 那如何把自己经常 ...
- iPad accessory communication through UART
We manufacture a new accessory for iPad/iPhone which should transfer commands to the iPad. We like t ...