【javascript】onload load ready的那些事
首先明确一下页面加载的步骤:
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的那些事的更多相关文章
- jQuery $(document).ready()和JavaScript onload事件
jQuery $(document).ready()和JavaScript onload事件 Why we need a right time? 对元素的操作和事件的绑定需要等待一个合适的时机,可以看 ...
- [Javascript]jquery $(document).ready() 与window.onload的区别
引用:http://www.jb51.net/article/21628.htm Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload ...
- jQuery 的ready事件和 JavaScript 的load事件对比
为了理解2个事件的异同,先了解一下HTML文档加载顺序 HTML DOM文档加载步骤 HTML DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关,一般浏览器渲染操作的顺序大致按如下几个步骤 1, ...
- onload事件属性,JQ中的load,ready方法
onload事件属性,JQ中的load,ready方法 前言 页面中的很多操作,需要我们在所需资源下载完成后,才可以进行操作,而资源没有及时下载,我们进行操作的话,是会报错.因此我们需要熟练掌握哪些事 ...
- JQuery onload、ready概念介绍及使用方法
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成,onload,ready概念容易混淆,下面为大家详细介绍下 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包 ...
- 前端中onload与ready的区别
Jquery的ready()与Javascrpit的load() 1 window.onload() $(document).ready() 加载时机 必须等待网页全部加载完毕(包括图片等),然后再执 ...
- JavaScript onload
The onload event occurs immediately after a page or an image is loaded.onload事件当一个页面或是一张图片加载完成时被触发. ...
- onload和ready的区别
onload和ready的区别 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行 $(document).read()是DOM结构绘制完毕后就执行,不必等到加 ...
- jsp中的javascript的$(document).ready( function() { $("#loginForm").validate()
转自:https://bbs.csdn.net/topics/392459787?list=71147533 下面是jsp页面中的JavaScript代码 $(document).ready( fun ...
随机推荐
- hibernate3的配置
原创 链接:https://pan.baidu.com/s/1S-x271CT3wBqQodfFI1dZg 密码:ghti hiberdate3的下载链接如上 hibernate3在MyEclipse ...
- redis整理の安全认证
设置客户端连接后进行任何其他指定前需要使用的密码. tips:因为 redis 速度相当快,所以在一台比较好的服务器下,一个外部的用户可以在一秒钟进 行 150K 次的密码尝试,这意味着你需要指定非常 ...
- unigui的UnimDatePicker控件使用经验
最近使用unigui的UnimDatePicker控件遇到只能选择当年之前的年份和日期及日期选择界面不能显示中文的问题,经以下设置就能正常使用.1.UnimDatePicker月份显示中文 unim ...
- button的onclick函数一直刷新
button中的onclick写成函数时需要 <button onclick="return function();"></button> 加一个retur ...
- EDM模板制作规范
为了保证最大的兼容性,在制作HTML的email页面时,请严格按照规范来书写: 1.页面宽度推荐500px,最大不要超过750px: 2.制作HTML的email页面时,不使用css+div来布局,最 ...
- 相当郁闷的问题,TabHost选项卡标签图标始终不出现?
在学习Android TabHost布局过程中,很多教程告诉我,这样来显示选项卡标签的图标和文字: TapSpec spec1 = tabHost.newTabSpec("tab 1&quo ...
- mvc - Authorize授权
from : http://www.cnblogs.com/asks/p/4372783.html http://www.cnblogs.com/myindex/p/5479428.html
- python学习之路 四 :文件处理
本节重点 掌握文件的读.写.修改方法 掌握文件的处理模式的区别 一.文件读取 1.读取全部内容 # 一次性读取文件 f = open("test.txt",'r',en ...
- BOI2007 Mokia | cdq分治求二维点数模板
题目链接:戳我 也没什么,其实主要就是为了存一个求二维坐标上矩形内点的个数的模板.为了之后咕咕咕地复习使用 不过需要注意的一点是,树状数组传x的时候可千万不要传0了!要不然会一直死循环的...qwqw ...
- Excel一对多查询(index+small+if)
一.学习 一对多查询模式化数组公式: =INDEX(区域,SMALL(IF(条件,行号数组,4^8),ROW(A1))) 三键齐按(ctrl+shift+回车) 在具有多个符合条件的情况下,提取和匹配 ...