jQuery库文件是在body元素之前加载的,必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。

在延迟等待加载,JavaScript提供了一个事件为load,方法如下:

window.onload = function () {}; //JavaScript等待加载

$(document).ready(function () {}); //jQuery等待加载load和ready区别

window.onload

$(document).ready()

执行时机

必须等待网页全部加载完毕(包括

图片等),然后再执行JS代码

只需要等待网页中的DOM结构

加载完毕,就能执行JS代码

执行次数

只能执行一次,如果第二次,那么

第一次的执行会被覆盖

可以执行多次,第N次都不会被上

一次覆盖

简写方案

$(function () {})

在实际应用中,window.onload很少直接去使用,因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。遇到网速慢或者存在大的图片要下载时,页面已经全面展开,图片还在缓慢加载,这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

浏览器加载模式:window.onload和$(document).ready()的区别(详解)的更多相关文章

  1. window.onload和$(document).ready()的区别

    window.onload和$(document).ready()的区别,如下表所示   window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...

  2. window.onload与$(document).ready()的区别

    对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...

  3. window.onload和document.ready的区别

    window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...

  4. window.onload 与 $(document).ready() 的区别

    以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...

  5. window.onload与document.ready的区别

    1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...

  6. 页面加载之window.onload=function(){} 和 $(function(){})的区别

    通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...

  7. window.onload与$(document).ready()之区别

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

  8. window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )

    首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...

  9. 【jQuery】window.onload 和 $(document).ready() 的区别

    ... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...

随机推荐

  1. oracle使用exp与imp在本地导入导出数据

    导出: exp user/password owner=user file=你要输出的目录以及文件名,后缀为dmpexp IOTMON/iotmon owner=QSMES file=/home/or ...

  2. N - Robot Motion(第二季水)

    Description A robot has been programmed to follow the instructions in its path. Instructions for the ...

  3. apache AH01630: client denied by server configuration错误解决方法

    今天本来是想要在自己本地搭建一个wamp环境用来做一些代码的测试和框架的学习. 鉴于目前工作的时候用到了php5.5,所以就用了wamp-server V2.5版本,安装完成之后配置虚拟主机一直出现4 ...

  4. redis怎么动态添加内存,动态配置,无需重启。

    在redis的使用过程中,有时候需要急需修改redis的配置,比如在业务运行的情况下,内存不够怎么办,这时要么赶紧删除无用的内存,要么扩展内存.如果有无用的内容可删除那么所有问题都已经解决.如果内容都 ...

  5. Binary Numbers(HDU1390)

    Binary Numbers 点我 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  6. Redis存储Session

    net Core 使用Redis存储Session   前言 Asp.net Core 改变了之前的封闭,现在开源且开放,下面我们来用Redis存储Session来做一个简单的测试,或者叫做中间件(m ...

  7. JSON.parse()和JSON.stringify()的用法

    JSON.parse()是用于从一个字符串中解析出json对象,如下所示 var str = '{"name":"flsummer","age&quo ...

  8. [python] 如何用python操作Excel

    直接上代码: from openpyxl import Workbook from openpyxl.cell import get_column_letter wb = Workbook() des ...

  9. 浅析 C++里面的宏

    说到宏,恐怕大家都能说出点东西来:一种预处理,没有分号(真的吗?).然后呢?嗯.......茫然中......好吧,我们就从这开始说起.最常见的宏恐怕是#include 了,其次就是#define 还 ...

  10. WPF GroupBox 样式分享

    原文:WPF GroupBox 样式分享 默认样式 GroupBox 样式分享" title="WPF GroupBox 样式分享"> 添加样式后 GroupBox ...