在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. 调用Windows属性窗口(居然是通过注册表来调用的)

    简述 在Windows系统下.可以通过:右键 -> 属性,来查看文件/文件夹对应的属性信息,包括:常规.安全.详细信息等. 简述 共有类型 共有类型 首先,需要包含头文件: #include & ...

  2. 封装fastjson为spring mvc的json view

    可以将其中的main方法删掉.测试用的.我测试的结果是,jackson比fastjson快. fastjson是1.1.36 jackson是2.2.3 jdk是1.7.40,client cpu是i ...

  3. poj 3753 Training little cats_矩阵快速幂

    题意: 通过各种操作进行,给第i只猫花生,第i只猫吃光花生,第i只猫和第j只猫互换花生,问n次循环操作后结果是什么 很明显是构建个矩阵,然后矩阵相乘就好了 #include <iostream& ...

  4. 移动前端之viewport

    在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...

  5. BZOJ 3181([Coci2012]BROJ-最小质因子为p的第k小素数)

    3181: [Coci2012]BROJ Time Limit: 10 Sec   Memory Limit: 64 MB Submit: 26   Solved: 7 [ Submit][ Stat ...

  6. 系统分层 manager层意义

    manager用于控制事务,通常是这么说的,但是如果把事务空指针service可以的,但是有些时候,service加了Transaction注解之后,在加别的注解,可能导致Transaction失效. ...

  7. 05JS高级 方法没有块级作用域

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. C语言预处理指令

    C程序的源代码中可包括各种编译指令,这些指令称为预处理命令.虽然它们实际上不是C语言的一部分,但却扩展了C程序设计的环境.本节将介绍如何应用预处理程序和注释简化程序开发过程,并提高程序的可读性.ANS ...

  9. java之从字符串比较到==和equals方法区别

    我们先看代码 String str1 = new String("hello"); String str2 = "hello"; System.out.prin ...

  10. jquery 获取select选中的值

    获取选中的名称:$("#selectPinType option:selected").text(); 获取选中的值:$("#selectPinType option:s ...