浏览器加载模式:window.onload和$(document).ready()的区别(详解)
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()的区别(详解)的更多相关文章
- window.onload和$(document).ready()的区别
window.onload和$(document).ready()的区别,如下表所示 window.onload $(document).ready() 执行时间 在页面所有内容(图片.文件)加载 ...
- window.onload与$(document).ready()的区别
对于很多初学者来说,window.onload出现在代码中的频率非常高,这似乎变成了一种习惯,可是并不知道具体为什么要加这句代码,可以做几个试验对比: 实验一: <script> docu ...
- window.onload和document.ready的区别
window.onload和document.ready虽然两个方法的运行效果都一样,但他们之间是存在着区别的: 一.从执行的时间 window.onload在dom文档结构加载完毕以后就可以执行,不 ...
- window.onload 与 $(document).ready() 的区别
以浏览器装载文档为例,在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件.在常规的 JavaScript 代码中,通常使用 window.onload 方法 ,而在 jQu ...
- window.onload与document.ready的区别
1. window.onload必须等到网页中所有的内容加载完(包含图片)才执行 document.ready网页中所有DOM结构绘制完执行,可能DOM并没有加载完 所有document.ready比 ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- window.onload与$(document).ready()之区别
1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2 ...
- window.onload()和$(document).ready的区别( $(document).ready == $(function(){ }) )
首先$(function(){}) 和 $(document).ready(function(){}) 是一个方法,$(function(){})为简写(用的多) $(document).ready和 ...
- 【jQuery】window.onload 和 $(document).ready() 的区别
... 在Stack Overflow上看到了这个问题,自己翻译了过来. The onload event is a standard event in the DOM, while the read ...
随机推荐
- [ofbiz]entitymode中类型的对照关系
在实体数据结构的时候,习惯于数据库的设计模式,int,varchar等各种类型,但是在entitymode中不是直接使用数据库的类型模式,而是自己定义了一套数据类型(type). 如何找到两者之间的对 ...
- kettle查询出来的真实值被识别为null
问题描述: 通过关联表查询出来的applyId(申请编号),在数据流里也是能看到的,但是在写入到数据表中的时候,由于设置了这个字段不能为空,所以一直报错. 问题实质: 数据流内存在的数据却不能保存,原 ...
- MSSQL 获取数据库字段类型
SELECT col.name AS 列名, typ.name as 数据类型, col.max_length AS 占用字节数, col.precision AS 数字长度, col.scale A ...
- php isset — 检测变量是否设置 foreach循环运用
例子 $a = 336 ; $b = 33 ; function large($x,$y){ if((!isset($x))||(!isset($y))){ // echo "this fu ...
- DNA Sorting--hdu1379
DNA Sorting Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total ...
- UVA 1599 Ideal Path (HDU 3760)
两次bfs: 第一次bfs逆向搜索,得到每个点到终点的最短距离,找出最短路:第二次bfs根据最短距离可以选择满足条件的最短路. 注意!碰到这种很大数据量的题目一定要记得用scanf,printf 输入 ...
- javascript的stringFormat函数实现
写一个简单的stringFormat来给自己用 function stringFormat(format, args) { var formatData; if (arguments.length = ...
- Oracle EBS-SQL (PO-12):检查期间请购单的下达记录数.sql
SELECT DECODE(PRHA.INTERFACE_SOURCE_CODE,'','手工','MRP','自动') 下达方式, PRHA.CREATION_DATE ...
- Android学习笔记——Activity的启动和创建
http://www.cnblogs.com/bastard/archive/2012/04/07/2436262.html Android Activity学习笔记——Activity的启动和创建 ...
- NFC-P2P MODE
今日看见有关国内电信业者要合组TSM (Trusted Service Manager)提供NFC 服务的新闻, 这是属于NFC 所能提供的3种Mode中的Card emulation mode (就 ...