DOM Ready 简述

当页面加载完成后去做一些事情:一般情况下一个页面的响应加载顺序是:域名解析-加载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

时间: 2024-08-24 10:22:30

DOM Ready 简述的相关文章

【jQuery源码】DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

DOM Ready 详解

DOM Ready 概述 熟悉jQuery的人, 都知道DomReady事件. window.onload事件是在页面所有的资源都加载完毕后触发的. 如果页面上有大图片等资源响应缓慢, 会导致window.onload事件迟迟无法触发.所以出现了DOM Ready事件. 此事件在DOM文档结构准备完毕后触发, 即在资源加载前触发. 另外我们需要在DOM准备完毕后, 再修改DOM结构, 比如添加DOM元素等. 否则有可能出现“Internet Explorer无法打开站点”的问题. 要模拟此错误,

window.onload及dom ready测试

测试代码段一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="http://www.twitter.com/test.css"> <script>

dom ready method

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title><script src="scripts/domReady.js"></script>    <script>    /* 1.计时器,不推荐,如果domRead

[转]jQuery DOM Ready

一直以来,各种JS最佳实践都会告诉我们,将JS放在HTML的最后,即</body>之前,理由就是:JS会阻塞下载,而且,在JS中很有可能有对DOM的操作,放在HTML的最后,可以尽可能的保证JS的执行在DOM加载完成之后.而如果放在onload事件中执行,如果页面有很多图像,那么页面的onload事件要过很久才会触发,因此DOM Ready事件就是最好的执行JS的时间了. 所以,如果有个DOM Ready事件就好了,虽然现代浏览器已经支持DOMContentLoaded事件,但是我们还是得处理

jquery dom ready, jqery2.1.1实现-源码分析

本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我现在闲来无事就闲扯一下jquery document  ready的实现.在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准 平时一般都会这样写,一般就这两种方式 $(document).ready(function(){ //do something }) $(function(){

Web UI - Javascript之DOM Ready

最近终于稍微适应了工作环境,终于可以让自己缓口气.于是决定要写点东西,算是督促.记录和提升自己的学习.代码的世界,你不轮它,以后就会被它轮.这个系列尽量保持在一周或两周更一篇,目标是在创造内容的时候更深刻的理解和提升自己所学的知识, 本质上,接触Javascript编程之美,我转到前端工作,其实就是因为非常喜欢和好奇Javascript(当然,也是享受频繁的用代码和用户交互的感觉). 什么是DOM Ready 还记得刚学习Javascript的时候,老师就一直各种强调教导告诉你说js的代码一定要

原生JS 实现 dom ready

记录一下项目技术问题: 记得:放在head标签内的脚本,第一时间执行 var baseTools = { // dom ready ready: function( f ){ var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = f

jQuery源码dom ready分析

一.前言 在平时开发web项目时,我们使用jquery框架时,可能经常这样来使用$(document).ready(fn),$(function(){}),这样使用的原因是在浏览器把DOM树渲染好之前,javascript是无法操作没渲染好的DOM节点. 其实除了$(document).ready(fn),$(function(){})写法外,还有两种让dom渲染完之后执行js的写法: $(document).on('ready', fn2) //通过on事件绑定函数,通过trigger触发也可