在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. 可获取公网IP的网址

    由于代理检验需要,现在小站经受不住大流量测试,于是多收集了一些. http://1111.ip138.com/ic.asp, http://ip.360.cn/IPShare/info, http:/ ...

  2. 进程退出前删除自身EXE

    进程退出前删除自身EXE 下面的代码由Gary Nebbett写就.Gary Nebbett乃是WINDOWS NT/2000 NATIVE API REFERENCE的作者.乃NT系统一等一的高手. ...

  3. [x-means] 1.x-means简介

    本文基于<X-means>和<BIC-notes>(原论文中BIC公式有误,这是对BIC的补充) K-means的缺点 每一轮迭代的计算花费大 需要用户指定K 易于收敛到局部最 ...

  4. UVA - 10131Is Bigger Smarter?(DAG上的DP)

    题目:UVA - 10131Is Bigger Smarter? (DAG) 题目大意:给出一群大象的体重和IQ.要求挑选最多的大象,组成一个序列.严格的体重递增,IQ递减的序列.输出最多的大象数目和 ...

  5. 【(阶乘的质因数分解)算组合数】【TOJ4111】【Binomial efficient】

    n<=10^6 m<=10^6 p=2^32 用unsigned int 可以避免取模 我写的SB超时 阶乘分解代码 #include <cstdio> #include &l ...

  6. 有用的BitConverter

    肯定有用的到的转换,记录下来. ///double =>ieee754 double d = 0.12345; byte[] IEEE754 = BitConverter.GetBytes(d) ...

  7. JqueryUI-3

    本文在于巩固基础 JqueryUI控件之滚动条 这次主要是看Jquery官网上的API文档来做的 <!DOCTYPE html> <html> <head lang=&q ...

  8. 样式布局分享-基于frozen.js的移动OA

    最近改造了公司移动OA的样式,改善了显示效果和用户体验,其中用到了腾讯的 frozen.js 框架,在此把布局代码分享给大家,希望大家可以用得上,具体效果如下图. Demo 百度网盘 下载地址 Git ...

  9. javascript模式——Prototype模式

    GoF权威的解释是,原型模式是一种通过对一个对象的克隆,创建基于这个对象的多种对象的模式. 为了实现这种原型模式,可以直接使用ECMAScript 5 中的方法Object.create.它不紧可以创 ...

  10. (原)工具篇-利用fis压缩项目

    fis3 1.添加 fis-conf.js 到项目根目录中 fis-conf.js 内容如下 : //配置MD5版本控制 fis.match('*.{js,css,png,jpg}', { useHa ...