document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件:

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

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

1、Dom Ready

用jQ的人很多人都是这么开始写脚本的: 
$(function(){ 
      // do something 
});

例如:

$(function() {
     $("a").click(function() {
           alert("Hello world!");
      });

})

这个例子就是给所有的a标签     绑定了一个click事件。即当所有链接被鼠标单击的时候,都执行 alert("Hello World!");
(自己的理解)也就是说页面加载时绑定,真正该触发时触发。
其实这个就是jq ready()的简写,他等价于: 
$(document).ready(function(){
     //do something
})
或者下面这个方法,jQuer的默认参数是:“document”;
$().ready(function(){
    //do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。

2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情,比如: 
window.onload=function(){
      //do something
}
或者经常用到的图片,假设这个
document.getElementById("imgID").onload=function(){
     //do something
}
这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
Dom Ready是在dom加载完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等;
Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等;
比如一个图片浏览的效果,通常如果图片尺寸很大的情况下,为了防止图片把页面撑开通常会限定图片的宽度或高度,如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上加个宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>,或者可以在css样式中加宽度或者高度的属性(推荐)。但是如果这些张规格比例不统一的图片要浏览呢?那就有问题,你设置宽高很可能造成图片严重失真。在ie6之后ie7,ie8还有其他主流浏览器支持css2.1中min-width,max-width,min-height,max-width,这样我们就可以用min-width,max-width,min-height,max-width解决这些问题,但是ie6除非是抛弃性能问题用css表达式(当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下)。这个时候ie的最好解决方案就是用Dom Ready而不是Dom Load,因为通常大图片加载的时候会一点一点的加载,这个在尺寸大,字节多,网速慢的时候表现的非常明显,用Dom Load,通常是先把页面撑开,加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久,用户会非常难受!!

原文地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/

JS 页面加载触发事件 document.ready和onload的区别的更多相关文章

  1. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  2. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  3. js页面加载完成事件

    jquery的一种简写形式: $(function(){ alert("页面加载完成!"); });  其对应的完整形态为: $(document).ready(function( ...

  4. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  5. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  7. document.ready和onload的区别

    转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...

  8. js页面加载的几种方式的速度: window.onload、 $(window).load、 $(function(){})、 $(document).ready(function () {})、onload=‘asd()’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

    想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...

随机推荐

  1. JS连等赋值的坑

    cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...

  2. uiautomator定位元素

  3. Python(模块(modue)、包(package))

    ''' 一 模块 模块一共三种: python标准库 第三方模块 应用程序自定义模块 模块两种执行方式: 1 用于启动执行 2 用于被调用执行 key:import module: 将执行文件(mod ...

  4. xx-net***简明使用教程

    简介 继psiphon3.lantern.shadowsocks后,翻 土啬 界就来个新角色:xx-net 这张图是.2016.8.30日Google最新的搜索结果,还是可以看出这款工具的火爆程度的, ...

  5. 2018-2019-2 20165114《网络对抗技术》Exp2 后门原理与实践

    目录 一.实验准备 二.实验内容 三.基础问题回答 四.实验过程及步骤 五.实验总结与体会 六.实验中遇到的问题与错误. 一.实验准备 1.后门概念 后门就是不经过正常认证流程而访问系统的通道. 哪里 ...

  6. hadoop入门小知识点

    注意各个主机之间的通信 文件的复制 scp指令 scp /etc/profile acm03:/etc 所有历史版本: archive.apache.org hdfs://acm01:9000     ...

  7. 【JAVA学习】java虚拟机内存配置,-Xss256m -Xms512m -Xmx800m -XX:MaxPermSize=512m

    转自:https://blog.csdn.net/a503921892/article/details/39048737 配置tomcat服务器内存大小中的Xms.Xmx.PermSize.MaxPe ...

  8. angularjs分页组件

    这是我第一次写博客,激动,首先,我也是个菜鸟,分享一下自己写的服务器端分页的代码,自己一步一步写的,其中也有参考别人的代码.技术比较渣,先这样了. // ====== 2019-1-3 ======/ ...

  9. html笔记(1)

    hgroup 代替div figure figcaption 独立流内容 替代 dl mark 替代 span

  10. "Entity Framework数据插入性能追踪"读后总结

    园友莱布尼茨写了一篇<Entity Framework数据插入性能追踪>的文章,我感觉不错,至少他提出了问题,写了出来,引起了大家的讨论,这就是一个氛围.读完文章+评论,于是我自己也写了个 ...