宝哥软件园

jquery $(文档)之间的差异 ready()和window.onload

编辑:宝哥软件园 来源:互联网 时间:2021-10-25

1.执行时间。

在页面中包括图片在内的所有元素都被加载之前,无法执行Window.onload。$(文档)。ready()是在绘制DOM结构之后执行的,而不是等待加载。

2.写作的数量不同。

Window.onload不能同时写入。如果有多个window.onload方法,则只有一个$(文档)。ready()可以同时写入,并且都可以执行。

3.简化写作。

Window.onload没有简化为$(文档)。ready(function(){})可以缩写为$(function(){ });

$(文档)。ready(function(){//execute code });或者$(function(){//execute code });在我之前的开发中,一般使用javascript,我一直使用jquery模式,也就是大多数时候,第一行的写法如下:

$(文档)。就绪(函数(){ 0.});此时,您不必等待加载所有的js和图片,但有时您必须等待所有的js和图片。

当所有的元素都被加载时,一些方法可以被执行。比如有些图片或者其他方面还没有加载。这时,点击某些按钮会导致意外情况。

需要:

$(窗口)。load (function () {$ ('# BTN-upload ')。点击(函数(){//例如:uploadPhotos();});});以下是转载内容。

使用$(window)有几个原因。load(function(){ 0.})而不是body.onload()。首先,它们都是在页面的所有元素(包括html标签、所有引用的图片、Flash等媒体)加载完成后执行的,这也是它们的共同点。

为什么不用身体。Onload () 1:

如果我们想同时加载多个函数,我们必须这样写。

Body onload='fn1(),fn2()'/body看起来极其丑陋。如果我们使用$(窗口)。load(),我们可以像这样加载多个函数。

$(窗口)。load (function () {alert('你好,我是jQuery!'。);});$(窗口)。load (function () {alert ('hello,我也是jQuery ');});这样写的话会从上到下执行这两个功能,看起来会漂亮很多。

为什么不用身体。Onload () 2:

js和html不能与body完全分离是一个严重的问题。Onload()。

此外,使用$(窗口)。load(function(){ 0.})和body.onload()有同样的问题,因为正如我在开头所说,它们都需要等待页面的所有内容。

加载后会执行,但如果网速慢,加载一个页面需要很长时间(从几秒到十几秒不等,甚至更长.),所以我们经常。

我们会遇到页面还没有完全加载,用户已经在操作页面的情况,导致页面显示的效果和我们预期的不一样。

所以在这里我推荐使用$(document)。ready(function(){}),或缩写为$(function(){}),因为它将在加载页面的dom元素后执行。

而不是等到图片或其他媒体下载完毕。

但是有时我们确实需要等到页面上的所有内容都被加载之后才能执行我们想要执行的函数,所以我们应该使用$(window)。load(function(){ 0.})或。

使用$(function(){})往往需要结合具体需求进行不同的选择。

最后,附加一个jQuery代码,该代码在加载所有DOM元素之前执行。

脚本类型=' text/JavaScript '(function(){ alert(' DOM尚未加载!');})(jQuery)/脚本呵呵,有时候我们也有这个需求!

以浏览器加载文档为例,页面加载后,浏览器会通过Javascript向DOM元素添加事件。在传统的Javascript代码中,通常使用window.onload方法,而在Jquery中,则使用$(document)。使用了ready()方法。$(文档)。ready()方法是事件模块中最重要功能,可以大大提高Web应用的速度。

window.load $(文档)。就绪()

执行时间必须等待网页中的所有内容(包括图片)被加载后才能执行。网页中的所有DOM结构都可以在绘制后执行。但是,与DOM元素关联的内容尚未加载,以下代码无法同时写入,无法正确执行:

window . onload=function(){ alert(" text 1 ");};window . onload=function(){ alert(" text 2 ");};结果只能输出第二个,以下几个代码可以同时编写并正确执行:

$(文档)。ready(函数(){ alert(" Hello World ");});$(文档)。ready(function(){ alert("再次Hello});结果输出两次。简写是不行的。

$(function(){ //do某物});此外,应该注意的是,由于事件登记在$(文档)中。只要DOM准备好了,ready()方法就会执行,此时可能不会下载元素的关联文件。比如图片相关的html已经下载解析到DOM树中,但是很有可能图片还没有加载,所以图片的高度、宽度等属性此时可能无效。要解决这个问题,可以使用- load()方法,这是Jquery中关于页面加载的另一种方法。Load()方法在元素的onload事件中绑定一个处理程序。如果处理程序绑定到一个窗口对象,它将在所有内容(包括窗口、框架、对象和图像等)之后被触发。)都是加载的;如果处理程序绑定到某个元素,它将在加载该元素的内容后被触发。Jquery代码如下:

$(窗口)。load(function(){//write code });相当于JavaScript中的以下代码。

window . onload=function(){//write code }最近在更改框架中嵌入的页面时,使用了jquery作为效果,页面本身绑定了onload事件。改动后在Firefox下测试正常流畅,IE下jquery出现需要十几秒,黄花菜凉了。

一开始我以为是和onload本身加载的方法冲突。网上一般都说$(文档)。ready()在页面DOM解析完成后执行,而onload事件在所有资源都准备好之后执行,也就是说,$(document)。ready()是在onload之前执行的,尤其是当页面图片越来越大的时候,这个时间差可能会更大。但是很明显我页面上的图片已经显示了十几秒,jquery的效果还没有出来。

尝试删除onload加载方法,结果还是一样。似乎没有必要编写原始的onload事件绑定来代替$(document)。就绪()。那是什么让火狐正常而IE可以呢?调试后发现,原来绑定在IE下的onload方法实际上是在$(文档)的内容之前执行的。ready(),而Firefox执行了$(文档)的内容。首先ready(),然后执行原来的onload方法。这似乎与网上的说法不完全一致。呵呵,有意思。好像越来越接近真相了。

查看jquery的源代码,看看$(document)。ready()已实现。

if(jquery . browser . msie window==top)(function(){ if(jquery . isready)返回;请尝试{ document . document element . doscroll(' left ');} catch(错误){ setTimeout(arguments.callee,0);返回;} //并执行任何等待函数jquery . ready();})();jQuery.event.add(窗口,' load ',jquery . ready);结果很明显,IE只执行$(文档)的内容。ready()然后执行原来的onload方法,就像Firefox一样,当页面没有嵌入到框架中时。对于嵌入在框架中的页面,它只在load事件上绑定和执行,所以自然只有在最初的onload绑定方法执行之后。在这个页面中,测试环境中有一个不可访问的资源,十几秒的延迟正是它放大的时间差。

以上就是本文的全部内容。要了解更多关于jQuery语法的信息,可以查看:《jQuery 1.10.3 在线手册》。希望大家多多支持我们。

更多资讯
游戏推荐
更多+