今天发现一个问题,修改页面时,无法对一个按钮进行条件的显示或隐藏,同事用setTimeout解决了。但我老觉得setTimeout不到万不得已的时候才能用。
经分析,这个要显示或隐藏的按钮是include进来的,于是用window.onload解决,后查资料发现与其$(window).load()方法等价,会等到页面所有内容加载完毕后才会触发。
现对 window.onload、$(document).ready这两个方法进行简单的比较:
1.执行时机
window.onload:必须等待网页中所有的内容加载完毕后(包括图片)才能执行
$(document).ready:网页中所有DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完
2.编写个数
1).window.onload:
不能同时编写多个
以下代码无法正确执行
window.onload = function() { alert("test1") }; window.onload = function() { alert("test2") };
结果只会输出"test2"
说明:window.onload为了达到两个方法顺序触发的结果,只能再创建一个新的JavaScript方法来实现,如下所示:
function one() { alert("test1"); } function two() { alert("test2"); } window.onload=function() { one(); two(); }
2).$(document).ready:
以下代码正确执行:
$(document).ready(function() { alert("Hello World!"); }); $(document).ready(fcuntion() { alert("Hello again!"); });
结果两次都输出
3.简化写法
1).window.onload:无
2).$(document).ready:
$(document).ready(function() { //... });
可以简写为:
$(function() { //... });
另外,需要注意一点,由于在$(document).ready()方法内注册的事件,只要DOM就绪就会被执行,因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕,并且已经解析为DOM树了,但很有可能图片还未加载完毕(在我这个问题中,就是include的文件还未加载完毕),所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题,可以使用jQuery中另一个关于页面加载的方法——load方法。load()方法会在元素的onload事件中绑定一个处理方法。如果处理方法绑定给window对象,则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发,如果处理方法绑定在元素上,则会在元素的内容加载完毕后触发。
因此
$(window).load(function() { //... })
等价于
window.onload = function() { //... }
当然,如果绑定在元素上,则当元素的内容加载完毕后触发。
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
调用load方法的完整格式是:load( url, [data], [callback] )
其中:
url:是指要导入文件的地址。
data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。
1.如何使用data
1).加载一个php文件,该php文件不含传递参数
$("#myID").load("test.php"); //在id为#myID的元素里导入test.php运行后的结果
2). 加载一个php文件,该php文件含有一个传递参数
$("#myID").load("test.php",{"name" : "Adam"}); //导入的php文件含有一个传递参数,类似于:test.php?name=Adam3).加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔
相关推荐
脱离document.onload和window.onload的onload事件,可多次添加加载事件!
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload事件...
网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行,而onload事件是在所有资源都准备完成之后才执行,也就是说$(document).ready()是要在onload之前执行的,尤其当页面图片较大较多的时候,这个时间差...
在jquery中,则使用$(document).ready()方法。下面介绍一下两者的区别。 [removed]() $(document).ready() 执行时机 在页面所有元素(包括图片,引用文件)加载完后执行。 页面中所有HTML DOM,CSS DOM结构...
[removed] = function(){ ... 相似,不同的是onload()的方法是在页面加载完成后才发生,这包括DOM元素和其他页面元素(例如图片)的加载,因此,使用document.ready()方法的执行速度比onload()的方法要快。 Javasc
主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法 接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里. 对于Body的Onload...
1.1 ready事件 VS onload事件 1、窗口事件-resize事件 1.2 resize 事件 当调整浏览器窗口大小时,发生 resize 事件。 x=0; $(document).ready(function(){ $(window).resize(function(){ $("span").text(x+=1); });...
$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异: 当一个文档完全下载到浏览器中时,会触发[removed]事件。而使用$(document)...
if($.$preLoad&&$dp.status==0)E(Y,"onload",function(){U(null,true)});if(!Y[N].docMD){E(Y[N],"onmousedown",D,true);Y[N].docMD=true}if(!V[N].docMD){E(V[N],"onmousedown",D,true);V[N].docMD=true}E(Y,...
$$.extend(this, this._setOptions(options)); }; QuickUpload._counter = 1; QuickUpload.prototype = { //设置默认属性 _setOptions: function(options) { this.options = {//默认值 action: "",//...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
/* * JQZoom Evolution 1.0.1 - Javascript Image magnifier... if($.browser.safari || $.browser.opera) { $(img).css({position:'absolute',top:'0px',left:'0px'}); } /*if(a.css('position')!= 'absolute' &&...
<!...<html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth ...<body onload="main();"> </html>
Document Information Properties Section 14.5. Forms Section 14.6. Images Section 14.7. Links Section 14.8. Anchors Section 14.9. Applets Section 14.10. Embedded Data Chapter 15. Forms...
2.编写个数不同[removed]不能同时编写多个,如果有多个[removed]方法,只会执行一个$(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法[removed]没有简化写法$(document).ready(function(){})可以...
方法一:在标签上加入 onLoad=”” onResize=”” 方法 写上对应的方法即可方法二:[removed]=function(){///…..} 在方法里面写上对应的代码即可着两种方法基本都可以解决你的问题了 代码如下: [removed]=...