码迷,mamicode.com
首页 > 其他好文 > 详细

DOM Ready 简述

时间:2015-09-15 01:37:21      阅读:229      评论:0      收藏:0      [点我收藏+]

标签:

当页面加载完成后去做一些事情:一般情况下一个页面的响应加载顺序是:域名解析-加载html-加载js和css-加载图片等其他信息。

技术分享

1.window.onload事件

    效果:在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发

  原理:一是ready,表示文档结构已经加载完成(不包含图片非文字媒体文件)。

     二是onload,指示页面包含图片等文件在内的所有元素都加载完成。

  代码:

1 window.onload = function(){
2   // do something
3   
4 }

2.Dom Ready

  效果:在第一步完成时,即可触发Dom Ready事件。

  代码:

 1 第一种:是jq ready()的简写
 2 $(function(){
 3    // do something
 4 })
 5 
 6 第二种:
 7 $(document).ready(function(){
 8    // do something
 9 })
10 
11 第三种:jQuery的默认参数是:document
12 $().ready(function(){
13    // do something 
14 })

 

Dom Ready 和 Dom Load的用法:

Dom Ready:是在dom加载完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性和样式等,就可以用dom ready.

Dom Load:是在整个dom文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性和样式等。

 

参考文档:http://www.cnblogs.com/zhangziqiu/archive/2011/06/27/DOMReady.html

     http://wenku.baidu.com/link?url=ExtGN5g-S7NRXv5ugFY5QJYRWUrJP48YsUmpGv-HQLctZEUdlmI3vDaU6T4uX4ycDVtCRanjzdSbpwVn4Ka9a_8aDAVlvSagByVKdRe2OGO

 

DOM Ready 简述

标签:

原文地址:http://www.cnblogs.com/donny-sf/p/4809004.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!