在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. 博客终于开通了happy

    HelloWorld! 在我不懈的申请下,我的博客终于在第4次申请后成功开通了! 作为一个毕业两年的码农,现在才开始想要记录一些东西,似乎有点晚 -_-! 希望多年以后可以在这看到我长长的足迹!

  2. QT 小票打印

    原地址: http://www.cppblog.com/biao/archive/2009/09/08/95603.html QString htmlString = QString("&l ...

  3. Codeforces #345 Div.1

    Codeforces #345 Div.1 打CF有助于提高做题的正确率. Watchmen 题目描述:求欧拉距离等于曼哈顿距离的点对个数. solution 签到题,其实就是求有多少对点在同一行或同 ...

  4. EasyUI选项卡tab页面处理示例

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  5. 下载类网站的SEO优化方面技巧

    在互联网国际中有一类十分主要的网站,那即是供应各种软件下载的网站,这类网站可以协助用户解决许多软件运用方面的疑问,可是随着知识产权维护的认识越来越强,许多下载类网站也要开端改动自个的经营策略,这么才可 ...

  6. Android UI 使用HTML布局(直接打开server网页)

    非常多时候我们用HTML布局会更方便直接,记录一下. 我如今主要是直接调用server的网页(实际上是jsp的,仅仅是返回的是html).所以须要联网,第一步加入权限. <uses-permis ...

  7. OAuth2.0授权机制说明

    授权机制说明   1 简介 优酷对第三方应用用户授权采用OAuth2.0标准 2 OAuth2.0 授权方式 优酷支持OAuth 2.0的三种授权方式,请根据平台选用不同的授权方式: 2.1 通用授权 ...

  8. The 5th tip of DB Query Analyzer

    The 5th tip of DB Query Analyzer             Ma Genfeng   (Guangdong UnitollServices incorporated, G ...

  9. android gallery的使用

    1: xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xml ...

  10. Malloc碎碎念

    (以前为给同学分享写的点东西,很基础.)现在的比赛中堆溢出非常常见,对于glibc下malloc的理解也要深入一些. malloc_chunk的对齐属性 在glibc中,malloc_chunk以 2 ...