document.ready()和传统的方法<body onload=”load()”>

最新推荐文章于 2021-01-05 17:31:27 发布
最新推荐文章于 2021-01-05 17:31:27 发布
阅读量255 收藏
点赞数
分类专栏： 前端 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/love398146779/article/details/84189024
版权
document.ready()和传统的方法<body οnlοad=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度比onload()的方法要快。

document.ready()可以说是jQuery的一大特色，它不仅比传统的Javascript函数onload()要快，而且加上jQuery强大的选择器可以在不用修改HTML代码情况下(例如：不用在HTML标签加入onClick()函数来调用其它自定义Javascript函数)对Web页面中的各种元素和事件进行控制、实现和Web客户交互的作用。

可是有时document.ready()并非你想像的那么快，我在最近的一个project里就碰到这个问题。例如一个页面含有多个相似的链接，每一个链接的HTML代码大致如下：


<a rel="popin" href="/cart/?popin=yes&act=add&sku=xxx">
<img src="/images/new/buynow.gif" border="0" />
</a>
当这些链接被点击后，相对应的物品(sku)就会被加入购物篮，为让客户点击链接后不用离开当前页面，我使用了jQuery的ajax方法，从后台调用添加购物篮函数，然后返回xml响应，最后把xml携带的信息通过HTML层(layer)传递给客户。大致的jQuery+ajax代码如下：


$(document).ready(function(){
$("a[rel^='popin']").click(function(){
$.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'xml',
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$('#cart_sum1').html($(xml).find('cart').text());
$('#buynow-result').html($(xml).find('pop').text());
$('#buynow-inform').show('slow');
$('#cart_sum2').html($(xml).find('cart').text());
}
});
return false;
});
});
注意到我用了document.ready，试图在DOM ready的时候给这些链接(<a[rel^='popin'>)绑定点击事件控制。这在我的机子(windowxp+firefox3)里测试通过，但是在我老板的机子(redhat+firefox)上，有时会出现点击链接后跳出XML代码，原因很明显: 当她点击链接的时候，链接还没有被绑定事件控制，也就是说document.reday()还是不够快。

怎么解决？我有打算在链接代码里加入传统Javscript的onClick函数，这样当客户点击链接的时候，先调用onClick函数，然后在onClick函数里在调用ajax，应该就可以解决问题。今天想看看别人都是怎么解决这个问题，就用Google搜索了一下。找到这篇论坛问答，觉得说的挺有道理：

Using window.onload waits until the whole page is loaded. (onload是在页面加载后起作用)
Using document.ready waits until the whole DOM is ready (document.ready是在DOM 准备好后起作用)
Having the script at the end of the body without document.ready, that doesn't wait. (把去掉document.ready的jQuery代码放在</body>前，无需等待)
准备明天到公司试试这种方法。其实把Javascript放在</body>前的说法以前也有看到过，Google的Analytics代码就建议放在</body>前。

Updated:(3/24/08)

经测试，第三种方法也不好用，主要问题是在页面没有完全加载完毕时，链接就已经被点击，这时</body>前的那一段jQuery代码还没有被加载，因此链接还没有被绑定ajax事件控制。

最终的解决办法是，把上面那段jQuery代码写出一个函数，反正header里，然后结合传统Javascript onClick函数，在链接被点击时直接调用header里函数。具体更改如下：

1. jQuery函数 (这段函数被放在header里)


function ajax_add(url_str){//把jquery代码写成一个函数
$.ajax({
url: url_str,
type: 'GET',
dataType: 'xml',
//timeout: 5000,
error: function(){
alert('Error loading XML document');
},
success: function(xml){
$('#cart_sum1').html($(xml).find('cart').text());
$('#buynow-result').html($(xml).find('pop').text());
$('#buynow-inform').show('slow');
$('#cart_sum2').html($(xml).find('cart').text());
}
});
}

2. 链接代码：


<a onClick="add_ajax('/cart/?popin=yes&act=add&sku=xxx')" href="#">
<img src="/images/new/buynow.gif" border="0" />
</a>
注意：链接直接加入onClick事件控制，而不在页面加载后绑定事件控制。这样就可以避免链接被点击时，事件还没有绑定的问题。
love398146779
关注
专栏目录
前端页面载入完毕事件load（），调用jQuery修改控件属性
shanchunyefu的博客
10-21 870
一：前端页面载入完毕，调用jQuery修改空间属性 <body onload="load()"> //载入完毕后调用load（） <script> function load(){ if ('{$userinfo['openid']}'==''){ mui.alert('老铁，微信里打开吧！') //-----------jQu...
$(document).ready(function()和 window.onload()执行顺序
qq_39751320的博客
06-01 1046
https://blog.csdn.net/qq_34802511/article/details/82589487 一、DOM加载过程 网页文档加载都是按顺序执行的。一般浏览器渲染操作顺序大致是一下几个步骤： 1.解析HTML结构 2.加载外部脚本和样式表文件 3.解析并执行脚本代码 4.构造HTML DOM模型 5.加载图片等外部文件 6.页面加载完毕 一、$(document).ready(function() $ (function() {}) 是$(document).ready(functi.
$(document).ready和window.onload、<body onload=”load()”> 小结
u012148262的博客
01-18 303
在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，文档树加载完不代表全部文件加载完）。而window.onload（）是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.o
HTML body onload 事件属性
evilcry2012的专栏
01-09 2430
HTML onload 事件属性 HTML 事件属性 实例 页面加载之后立即执行一段 JavaScript： onload="load()"> 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera          
<body onload="showAccount();">
༺ bestcxx的专栏 ༻
03-15 706
onload,在页面加载完毕之后，运行方法。
Jquery中的$(document).ready()详解
热门推荐
beidaol的专栏
07-12 10万+
转载：https://blog.csdn.net/u010098331/article/details/62036597window.onload = function(){ alert("welcome"); }语句的作用是希望在页面加载完，自动执行定义js代码（function）。$(document).ready(function(){.... })这个函数是用来取代页面中的window.o...
全面解析jQuery $(document).ready()和JavaScript onload事件
01-19
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset=utf-8> <...document.getElementById...<div id=panel>click me.</div> </body> </html>
jquery中的$(document).ready()使用小结
12-11
document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和其他页面元素（例如图片）的加载，因此，使用document.ready()方法的执行速度...
jQuery(document).ready(function($) { });的几种表示方法
11-24
总结来说，`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式，而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别，可以帮助开发者更有效地...
$(document).ready、body.Onload()和 $(window).load的区别
john2522的专栏
08-20 3万+
JavaScript文档加载完成事件 window.load(function(){...})和body.onload()都存在同样一个问题，那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成（不包含图片等非文字媒体文件），不必等到所有的加载完毕。 原理是： $(do
js加载顺序疑惑：window.load、document.body.load和$(function(){})
zeromike
10-04 1087
        今天在看脚本加载的顺序，想探讨一下window.load和document.body.load和$(function(){})的执行顺序。我也没太研究明白，希望大神帮我一下，指明我前进的方向。我先谢了,我这想探讨的是为什么会出现这种情况，而不是说用哪种方式去实现加载，或者说规避这种情况。           浏览器使用Firefox32.0.3，Chrome39.0.216...
在网页加载完成后执行——body的onload()
Winter--王大梅
10-26 1万+
一个师哥说过：前台开发，往往一个问题纠结半天，还没有技术含量。对这些真的是深有体会了。还是要多多积累吧。     最近遇到了一个问题：点击datagrid的行，跳转到相应的详情界面，并进行一系列的查询然后将内容返回到页面上。这时，问题就来了。 先说一下一开始我的代码： datagrid行单击事件： $("#dgApply").datagrid({ onClickRow:function
实现在html页面加载之后执行js方法
Mr_WoLong
01-05 5048
方法一、JS方法οnlοad="load(); 1.最简单的调用方式，直接写到html的body标签里面： <html> <body onload="load();"> </body> </html> 方法二：window.οnlοad=function 引入js,在script中使用window.onload=function方法 <!-- 全局js --> <script src="../js/jquery.min.
页面加载后自动执行js的几种方法
吾行远方
08-29 3752
一、JS方法 1、直接写到html的body标签里面： load是自动执行的方法名 <body onload="load();"> </body> 2、在JS语句调用： <script type="text/javascript"> function load() 　　{ 　　 alert("自动执行load()"); 　　 } 　　 ...
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比
《春馨梦》的专栏
03-17 1万+
html 中页面的加载顺序以及window.onload 与body 标签里面的onload事件的对比。 情况一：head 、body 以及body 外面的window.onload采用匿名方法。 onload 的顺序判断 /** * 加载页面 Body */ function loadBody(){ console.log("load
前端的加载------ready()方法、onload事件、JQuery---load()方法
zhangankang的博客
07-01 2088
关于前端加载的运用有两种形式：一、DOM树加载完成后使用，ready()；二、页面完全加载后使用，onload、load()。 了解： HTML DOM文档加载顺序： 1、解析HTML结构 2、加载外部脚本和样式表文件 3、解析并执行脚本代码 4、构造HTML DOM模型 5、加载图片等外部文件 6、页面加载完毕 ready() 方法是在页面完成HTML的加载并建立了DOM树之后...
不在body标签上加载onload事件，实现这种效果
GSE的成长之路
06-27 4815
alert("body or window onload");ORwindow.onload=function(){alert("body or window onload");}另附onload事件相关介绍定义和用法 onload 事件会在页面或图像加载完成后立即发生。语法 onload="SomeJavaScriptCode"
JS中页面加载事件window.onload、onload()、document.onclick
xiaokangmiclong的博客
11-20 8879
当我们刷新页面的时候，有时需要页面自动加载一些事件来达到预期效果，现介绍下面三种方法Onload()、addLoadEvent()、document.onclick。 onload() 事件会在页面或图像加载完成后立即发生。注意是在页面或图像加载后才发生，所以当页面有很大数据量没加载完时，onload()事件不会发生。而addLoadEvent()会在页面刷新的时候发生，document.o
js获取页面加载过程做一个简单的loading
记录踩过的坑只为了更好地填坑
03-29 8868
前几天写了一个简单的，还是觉得改善一下 document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. function loadingChange() { if(document.readyState == "complete"){//当页面加载状态为完全
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn") oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名:<input type="text" /><br /> <br /> 账号:<input type="text" /><br /> <br /> 密码:<input type="password" /> <br /> <br /> <form method="post"> 性别: <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 </form> <br /> <select> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> <br /> <br /> <input Id="btn" type="button" value="提交" /> </body> </html> 请改进这段代码
最新发布
05-27
这段代码有一些问题，我来逐个指出并提供改进的方案： 1. 没有为表单元素设置name属性，导致表单提交时无法获取表单数据。因此，需要给每一个表单元素都设置name属性，例如： ```html <input type="text" name="name"> ``` 2. 在性别选项中，使用了一个嵌套的form元素，这是不合法的HTML结构。应该将性别选项用label元素包裹，并为每个选项设置id属性，然后在label元素中使用for属性指向该选项的id，例如： ```html <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label> ``` 3. select元素没有设置name属性，也无法选择默认选项。应该给select元素设置name属性，并在其中加入一个默认选项（可以使用disabled和selected属性来禁止该选项被选中），例如： ```html <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select> ``` 4. input元素的id属性应该为小写字母。 下面是改进后的代码： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>信息填写</title> <script> window.onload = function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function () { alert("提交成功"); }; } </script> </head> <body> <h1>信息填写</h1> <form method="post"> 姓名：<input type="text" name="name"><br> <br> 账号：<input type="text" name="account"><br> <br> 密码：<input type="password" name="password"><br> <br> <label for="male"><input type="radio" id="male" name="gender" value="男">男</label> <label for="female"><input type="radio" id="female" name="gender" value="女">女</label><br> <br> <select name="language"> <option disabled selected>请选择语言</option> <option>HTML</option> <option>CSS</option> <option>jquery</option> <option>javascript</option> <option>vue.js</option> </select><br> <br> <input id="btn" type="button" value="提交"> </form> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值