在JavaScript中，onload函数是最经常使用的，几乎涉及到JavaScript的童鞋都少不了要接触它。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句，因为按照文档流的执行顺序，通常用于头部加载JavaScript的时候需要用到。

1
2
3
window.onload = function(){
    // 当网页加载完成后执行这里的代码块
};

而在jQuery中也有一个对应的函数，即等待网页加载完后执行代码块

1
2
3
$(document).ready(function(){
    // 当网页加载完成后执行这里的代码块    
});

以上这两个看似一样的功能，但实际有很大的区别

onload不仅在创建DOM树之后，而且在所有外部资源全部加载完毕，并且整个页面在浏览器窗口中显示完毕之后，才会执行。这些资源不仅包括图片资源，而且包括嵌入在页面上的flash视频，如果图片或者flash过多，那么会一段很长加载时间，也就意味这延迟执行代码块的时间会更多。

jQuery中的ready()方法只需要等待文档结构被完全解析并且浏览器已经把HTML转化为DOM树后就会执行代码块，这里注意的是仅仅是DOM，网页中的图片，flash等外部资源都毫无关联。

由此可见jQuery中的ready()方法将缩短等待时间。

当然还有另外一种方式，就是把脚本都在<body>标签后面，这样的话网页按照文档流顺序执行，也会达到JavaScript中onload或者jQuery中ready()效果，并且这中方式将更快的展现网页内容。

jquery中read与js中onload区别的更多相关文章

  1. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

  2. javascript中，一个js中的函数，第一句var _this = this;为什么要这样做？

    javascript中,一个js中的函数,第一句var _this = this;为什么要这样做? 下面是源码: 下面这段代码是常用的网站首页,自动切换span或者tabbar来变更List显示内容的 ...

  3. jq中$(function(){})和js中window.onload区别

    先看下执行代码: $(function(){   console.log("jq");}) $(function(){   console.log("jq1") ...

  4. JQuery中width和JS中JS中关于clientWidth offsetWidth scrollWidth 等的含义

    JQuery中: width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度: outerWidth()方法用于获得包括内边界(padding)和 ...

  5. 如何将一个对象存到网页中并在js中使用

    需求:希望在js中使用Controller传过来的对象,特别是对象里存有list的数据. 不希望循环使用隐藏域. 解决办法:在View中使用Json.Net序列化: @{ string jsonStr ...

  6. 在vue项目中的main.js中直接使用element-ui中的Message 消息提示、MessageBox 弹框、Notification 通知

    需求来源:向后台请求数据时后台挂掉了,后台响应就出现错误,不做处理界面就卡住了,这时需要在main.js中使用axios的响应拦截器在出现相应错误是给出提示.项目使用element-ui,就调用里面的 ...

  7. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  8. unity3d中C#与JS的一些区别

    unity3d目前支持C#和JS两种脚本语言. 学习过程中发现很多教程使用的是JS语言,自己还是用C#比较多,unity原生使用的是Mono,使用C#会更加接近unity的编程思想. 1.方法的定义, ...

  9. jquery学习-document.ready和document.onload区别

    $(function(){}) 和$(document).ready(function(){}的作用一样,表示在document树加载完之后执行一个函数. $(document).onload(fun ...

随机推荐

  1. CLR读书笔记——委托

    协变性和逆变性 协变性是指方法能返回从委托返回类型派生的一个类型. 逆变性是指获取的参数可以是委托参数类型的基类. 举个例子吧,看以下定义的委托,以及方法. delegate Object MyCal ...

  2. QT GUI（主）线程与子线程之间的通信——使用跨线程的信号槽

    在主线程上,可以控制子线程启动,停止,清零 如果子线程启动的话,每一秒钟会向主线程发送一个数字,让主线程更新界面上的数字. 程序截图: 上代码: #include <QtGui> #inc ...

  3. C语言的本质（25）——C标准库之内存管理

    程序中需要动态分配一块内存时怎么办呢?我们可以定义一个缓冲区数组,但是这种方法不够灵活,C89要求定义的数组是固定长度的,而程序往往在运行时才知道要动态分配多大的内存,例如: void foo(cha ...

  4. Eclipse Velocity插件安装

    打开eclipse安装velocity插件,这里有两种eclipse velocity的安装 方式一:不推荐的安装(安装会失败) Help>install new software>add ...

  5. 在PHP中处理表单之—Checkbox

    原文翻译自:http://www.html-form-guide.com/php-form/php-form-checkbox.html 单个checkbox  形如: <form action ...

  6. Makefile里调用Shell注意点

    http://www.linuxidc.com/Linux/2012-04/59093.htm 大家经常编写和使用Makefile, Makefile里面也经常用到shell, 但对其中一些需要注意的 ...

  7. javascript第十六课:动态注册事件

    直接给dom元素添加动态事件,如: document.getelementbyid('#id').onclick=function(){ 方法体! };

  8. UVA 10131 Is Bigger Smarter?(DP)

    Some people think that the bigger an elephant is, the smarter it is. To disprove this, you want to t ...

  9. 你知道为什么Xcode6中Swift没有智能提示和自己主动补全功能吗 ?

    你知道为什么Xcode6中Swift没有智能提示和自己主动补全功能吗 ? 长沙戴维营教育将为你解开这个巨大的谜团大BUG! http://www.ubuntucollege.cn/course/29/ ...

  10. PropertyGrid—为复杂属性提供下拉式编辑框和弹出式编辑框

    零.引言 PropertyGrid中我们经常看到一些下拉式的编辑方式(Color属性)和弹出式编辑框(字体),这些都是为一些复杂的属性提供的编辑方式,本文主要说明如何实现这样的编辑方式. 一.为属性提 ...