首先明确一下页面加载的步骤:

  1、下载解析HTML文档结构

  2、加载外部脚本文件与样式表文件

  3、解析并执行脚本代码

  4、构造HTML DOM模型

  5 、加载图片等外部文件

  6、页面加载完毕  


  接下来,我们分别介绍一下三者:

  load()方法:

    load()方法总共有两种,分别是 jquery的load()方法和jquery Ajax的load()方法。

    如何区别两个方法在于参数的不同。

    jQuery:

      当指定的元素(及子元素)已加载时,会发生 load() 事件。

      该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。

      根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。

      语法:

        $(selector).load(function)

    jQuery Ajax:

      通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

      语法:

        load(url,data,function(response,status,xhr))

    load事件必须等到网页中所有内容全部加载完毕之后才被执行。即上述的第六步完成后再运行函数。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。所以当我们要加载一个特别大的图片时,如果没有在图片标签就限制了图片的大小,而是在load内设置图片大小,就会造成图片先把页面撑开,等到图片全部加载完毕后再改变其大小的问题。这样以来,用户体验就会非常的差。

  ready()方法:

    ready()方法在上述第4步完成后运行,即DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

    语法:

      $(document).ready(function)

      $().ready(function)

      $(function)

    上面三种写法效果是一样的,后两种写法是第一种写法的简写方式。

    于是,上述特别大图片的加载情况最好就是把图片的设置放到ready()方法中来,这样等到开始加载图片时,就已经给图片设置了大小,这样就不会造成图片把页面撑开而破坏页面布局的情况发生了。

  onload()事件:

    前两者为jQuery的方法,而onload()是js的一个事件,就如同onclick()事件一样。

    onload 事件会在页面或图像加载完成后立即发生。

    语法:

      onload="SomeJavascriptCode"


  这样就可以看出来三者的区别了,load()和ready()是jQuery的方法,onload()是js的一个事件。

  如果文档中没有相关联的图片等媒体文件的话,使用load()和使用ready()性能上没有多大的区别,不过如果存在,则使用ready()会避免很多麻烦。

  还有load()方法只有一个起作用,即当你运行多个load()方法时,只有最后一个起作用,而ready()方法则可以同时运行多个,这也是ready()方法相对于load()方法的优势之处。

  所以在需要使用这一方法时,尽量使用ready()方法。

  至于onload()事件,则如同onclick()、onmouseover()等事件一样,使用方法也没有区别。这就是onload()和load()的区别,看起来似乎一样,不过却是完全不同的两者。

【javascript】onload load ready的那些事的更多相关文章

  1. jQuery $(document).ready()和JavaScript onload事件

    jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...

  2. [Javascript]jquery $(document).ready() 与window.onload的区别

    引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...

  3. jQuery 的ready事件和 JavaScript 的load事件对比

    为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...

  4. onload事件属性,JQ中的load,ready方法

    onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...

  5. JQuery onload、ready概念介绍及使用方法

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下   页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包 ...

  6. 前端中onload与ready的区别

    Jquery的ready()与Javascrpit的load() 1 window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕(包括图片等),然后再执 ...

  7. JavaScript onload

     The onload event occurs immediately after a page or an image is loaded.onload事件当一个页面或是一张图片加载完成时被触发. ...

  8. onload和ready的区别

    onload和ready的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行 $(document).read()是DOM结构绘制完毕后就执行,不必等到加 ...

  9. jsp中的javascript的$(document).ready( function() { $("#loginForm").validate()

    转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...

随机推荐

  1. 解读DbContext中的三种【EagerLoad,LazyLoad,ExplicitLoading】加载模式

    一:立即加载,延迟加载,显式加载 1. 立即加载 Student Domain{ Teacher theacher} using (SchoolDBEntities db = new SchoolDB ...

  2. Transaction And Lock--两种方式实现可重复读

    一些需求要求两次查询数据之间不允许数据被修改,即可重复读取 可重复读REPEATABLE READ与串行化SERIALIZABLE的区别在于串行化要求满足该查询的数据不被修改且无新满足该查询条件的数据 ...

  3. 【git】常用命令

    // 下载Git项目git clone url // 显示当前git配置git config --list // 设置用户信息git config --global user.name "& ...

  4. Java 访问修饰符使用规则

    作用域 当前类 同一package 子孙类 其他package public √ √ √ √ protected √ √ √ × friendly √ √ × × private √ × × × 1. ...

  5. 《Beginning Java 7》 - 6 - 深入理解 String

    public final class String implements Serializable, Comparable<String>, CharSequence 所以: 1. Str ...

  6. 在 android 上运行 python 的方法

    在android上运行python脚本,或者在android上使用python交互界面,对熟悉python的研究或开发人员来说,是一件很有吸引力的事情,因为python脚本真是非常高效,另外,有很多非 ...

  7. ubuntu设置root登录ssh

    1. 默认不带ssh,所以需要安装一下ssh sudo apt install openssh-server 2 .设置root密码,ubuntu默认root密码是随机的,需要重置一下 sudo pa ...

  8. “全栈2019”Java第五十二章:继承与初始化详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  9. [译文]casperjs使用说明-测试

    capserjs自带了一个测试框架,它提供了一个使你能够更容易的测试你的web应用的工具集. 注意: 1.1版本变更 这个测试框架,包括它的所有API,仅能使用在casperjs test子命令下 如 ...

  10. 【UVA10816】Travel in Desert (最小瓶颈路+最短路)

    UVA10816 Travel in Desert 题目大意 沙漠中有一些道路,每个道路有一个温度和距离,要求s,t两点间的一条路径,满足温度最大值最小,并且长度最短 输入格式 输入包含多组数据. 每 ...