ready与load谁先执行:

大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。

DOM文档加载的步骤:

要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:

1
2
3
4
5
6
解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。
构造HTML
DOM模型。
//ready
加载图片等外部文件。
页面加载完毕。//load
从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。

ready事件:

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

load事件:

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

总结:

相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。


jQuery load()和ready()的更多相关文章

  1. jQuery学习一:jQuery中的ready和load事件

    //ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...

  2. jQuery load()方法用法集锦!

    调用load方法的完整格式是:DE>load( url, [data], [callback] ),其中DE> DE>urlDE>:是指要导入文件的地址. DE>data ...

  3. JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意. 最近先来无事便查了一下资料, onload 事件(W3c上给 ...

  4. jQuery的document ready与 onload事件——你真的思考过吗?

    在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是do ...

  5. 在 ASP.NET 中使用 jQuery.load() 方法

    今天就让我们看看在 ASP.NET 中使用 jQuery.load() 方法来调用 ASP.NET 的方法,实现无刷新的加载数据. 使用 jQuery 的朋友应该知道可以使用 jQuery.load( ...

  6. javascript的window.onload()方法和jQuery的$(document).ready()的对比

    jQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 windo ...

  7. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  8. jQuery中的ready方法及实现按需加载css,js

    模拟jQuery中的ready方法及实现按需加载css,js 一.ready函数的实现 经常用jQuery类库或其他类库中的ready方法,有时候想想它们到底是怎么实现的,但是看了一下jQuery中的 ...

  9. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

随机推荐

  1. Eclipse setting Java code style and codetemplate

    1.open the eclipse tool window First click the Window menu,then check the children's menu which name ...

  2. [Leetcode][Python]42: Trapping Rain Water

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 42: Trapping Rain Waterhttps://oj.leetc ...

  3. web站点监控脚本web_status_code,tomcat 80,oracle1521

    1,完整的监控脚本如下 #!/bin/bash #web_status_code=`curl -o /dev/null -s -w "http_code:%{http_code}" ...

  4. HDU 2517 / POJ 1191 棋盘分割 区间DP / 记忆化搜索

    题目链接: 黑书 P116 HDU 2157 棋盘分割 POJ 1191 棋盘分割 分析:  枚举所有可能的切割方法. 但如果用递归的方法要加上记忆搜索, 不能会超时... 代码: #include& ...

  5. edit distance leetcode

    这样的字符转换的dp挺经典的, 若word1[i+1]==word2[j+1] dp[i+1][j+1] = dp[i][j]:否则,dp[i+1][j+1] = dp[i][j] + 1.(替换原则 ...

  6. lua的学习

    lua是什么 Lua是一中嵌入式的脚本语言. Lua语言可以独立进行编程,但这不是其主要的使用方式.Lua虽然有动态.灵活的语法提供强大的功能,但并不像 Java.Python 等一样有一个完善的库( ...

  7. 【Android】Intent中使用Extra传递数据

    传值方法一 Intent intent = new Intent(); Bundle bundle = new Bundle(); //该类用作携带数据 bundle.putString(" ...

  8. Mansory算法分析

    相信大家对mansory排版算法印象十分深刻,它能够十分有效的实现页面紧凑排版,节省空间,并且还显得十分美观.在很多网站,包括鼎鼎有名的pinterest都使用了这个算法来实现排版.这个过程有点象瓦匠 ...

  9. C#运用实例.读取csv里面的词条,对每一个词条抓取百度百科相关资料,然后存取到数据库

    第一步:首先需要将csv先装换成datatable,这样我们就容易进行对datatable进行遍历: /// 将CSV文件的数据读取到DataTable中 /// CSV文件路径 /// 返回读取了C ...

  10. php正则表达式匹配函数

    <?php function show($var=null){ if(empty($var))  { echo 'null'; }else if(is_array($var) || is_obj ...