load和DOMContenLoaded的区别
load和DOMContentLoaded的作用就是当页面加载完成的时候自动执行,但他们执行的时间点是不一样的。
DOM文档加载步骤:
(1)解析html结构
(2)加载外部脚本和样式表文件
(3)解析并执行脚本代码
(4)构造HTML DOM模型 //DOMContentLoaded执行点
(5)加载图片等外部文件
(6)页面加载完毕 //load
从上面这个流程,我们就能很清晰的看到load和DOMContentLoaded的不同,load是在第六步完成之后执行,而DOMContentLoaded是在第四步完成之后执行。很明显DOMContentLoaded的执行是在load之前的,下面是一个实例:
window.addEventListener("load", function () { //添加load事件
console.log("load执行");
}, false);
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false)
结果:DOMContentLoaded先执行,而load后执行
jQuery有3种针对文档加载的方法:
$(document).ready(function() {
// ......
})
//document ready 简写
$(function() {
// .....
})
$(document).load(function() {
// ......
})
load是在第六步完成之后执行,而ready是在第四步完成之后执行
总结:DOMContentLoaded比load更符合用户体验,因为load还要等其他外部资源(图片之类的)加载完才能执行,而这些资源并不会影响到dom结构,所以我们大部分情况下都可以在dom加载第四步就执行我们的JavaScrip代码,也就是使用DOMContentLoaded。
ps: 低版本的ie可以使用onreadystatechange事件,当document.readyState == "complete"时执行对应的代码,这个事件不太可靠,比如当页面中存在图片的时候,可能反而在 onload 事件之后才能触发,换言之,它只能正确地执行于页面不包含二进制资源或非常少或者被缓存时作为一个备选吧。
document.attachEvent("onreadystatechange", doSomething) //当页面加载状态改变的时候执行这个方法.
function doSomething()
{
if(document.readyState == "complete"){ //当页面加载状态为完全结束时进入
//你要做的操作。
}
}
load和DOMContenLoaded的区别的更多相关文章
- Objective C类方法load和initialize的区别
Objective C类方法load和initialize的区别 过去两个星期里,为了完成一个工作,接触到了NSObject中非常特别的两个类方法(Class Method).它们的特别之处,在于 ...
- iOS load和initialize的区别
可能有些还不清楚load和initialize的区别,下面简单说一下: 首先说一下 + initialize 方法:苹果官方对这个方法有这样的一段描述:这个方法会在 第一次初始化这个类之前 被调用,我 ...
- Hibernate 中 load() 和 get() 的区别
get 和 load 方式都是是根据 id 取得一个记录.下边详细说一下 get 和 load 的不同,因为有些时候为了对比也会把 find 加进来. 1.从返回结果上对比: load 方式检索不到的 ...
- 类方法load和initialize的区别
1.+load方法当类或分类添加到object-c runtime时被调用,子类的+load方法会在它所有父类的+load方法之后执行,而分类的+load方法会在它的主类的+load方法之后执行.但不 ...
- json.dumps 和 json.dump的区别,load和loads的区别
json.dumps 和 json.dump的区别,load和loads的区别
- docker save load export import的区别
export export命令用于持久化容器(不是镜像).所以,我们就需要通过以下方法得到容器ID: sudo docker ps -a 接着执行导出: sudo docker export < ...
- jquery的load和get的区别
jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...
- IOS杂笔- 7(类方法load与initialize的区别 浅析)
在介绍两种类方法之前,NSObject Class Reference里对这两个方法说明: +(void)initialize The runtime sends initialize to each ...
- hibernate的get、load的方法的区别,IllegalArgument异常
关于hibernate中的load,get,以及延迟加载问题 今天在使用hibernate时,发现一异常: could not initialize proxy - no Session 查询资料之后 ...
随机推荐
- C#中级-Windows Service程序安装注意事项
一.前言 这周除了改写一些识别算法外,继续我的Socket服务编写.服务器端的Socket服务是以Windows Service的形式运行的. 在我完成Windows Service编写后,启动服务时 ...
- solr安装配置
1.solr是基于tomcat安装部署的 2.网上下载solr-5.2.1 http://lucene.apache.org/solr/downloads.html 3.解压solr文件 tar zx ...
- Qt编写QUI皮肤生成器
用Qt写项目写多了,为了满足不同客户的需求,需要定制不同样式的界面,QUI皮肤生成器应运而生.思考这个工具的架构花了一年时间,如何从复杂的配色方案中提取出共性,然后将共性转为具体的QSS文件.思考架构 ...
- 在IIS使用localDB
项目使用localdb来作为本机测试数据库,发布到本机IIS后项目却链接不到数据库,查看windows日志为如下错误 "无法获取本地应用程序数据路径.很可能是因为未加载用户配置文件.如果在 ...
- dJango前言之 socketserver源码
socketserver源码分析: ftpserver=socketserver.ThreadingTCPServer(('127.0.0.1',8080),FtpServer) ftpserver. ...
- Fiddler工具的界面说明
1.Fiddler界面说明 2.session的模块说明 包含部分如下: 注:标蓝色区域的内容为平时较常用的部分 3.session不同图标和不同颜色的含义 默认颜色的含义如下: 部分图标的含义如下: ...
- .Net 如何模拟会话级别的信号量,对http接口调用频率进行限制(有demo)
现在,因为种种因素,你必须对一个请求或者方法进行频率上的访问限制. 比如, 你对外提供了一个API接口,注册用户每秒钟最多可以调用100次,非注册用户每秒钟最多可以调用10次. 比如, 有一个非常吃服 ...
- Linux下设置SSH端口
SSH 为 Secure Shell的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话 ...
- keepalived(nat)+ftp+http
一. 环境要求需要2台LVS和n(n>=2)台RS操作系统 负载均衡模式 VIP NVIPRHEL7.4 NAT 193.168.141.30 192.168.102.165 LVS1 LVS2 ...
- java equals == contentEquals
equals与== 经常用于比较,用法如下:字符串比较相同用equals,普通数值(基本数据类型)比较用==, contentEquals下面讲 理论准备: java的基本类型如int.float,d ...