JavaScript原生系列

2023-11-01 22:07| 来源: 网络整理| 查看: 265

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/100661841

JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及）

1.原生window.onload 和 body οnlοad="">，原生没有ready函数

2.window和document的区别

3.原生和JQonload比较（JQ基本过时，了解一下就行）

1.原生window.onload 和 body οnlοad="">，原生没有ready函数

1.window.onload = function(){}方法是在网页中的所有的元素(包括元素的所有关联文件：图片、音视频、flash等)都完全加载到浏览器之后才执行。整个window页面加载完成后才执行，同级谁在前面谁先执行。多次绑定函数会覆盖前面的window.onload绑定的函数。

2.在标签上静态绑定onload事件，body οnlοad="meathName1();meathName2();">等待body加载完成，就会执行meathName1()方法。在window和dom之后执行，总是最后执行。这里的onload函数会覆盖window.onload，但是meathName2不会覆盖meathName1。

2.window和document的区别

1.window代表的是浏览器窗口，即可视的浏览器窗口。document代表的是整个页面的dom元素，即document只是window的一个属性；

2.两者的区别在页面有滚动条时可以直观的显示出来，当出现滚动条时，$(window).height和$(document).height是不相等的，$(document).height比$(window).height大，因为window的高度始终都是可见的浏览器窗口的高度，而document的高度则是整个页面的dom元素的高度，即超出一屏幕了。

3.原生和JQonload比较（JQ基本过时，了解一下就行）

1.window.onload = function(){} / $(window).load(function)方法是在网页中的所有的元素(包括元素的所有关联文件：图片、音视频、flash等)都完全加载到浏览器之后才执行。如果页面的这些内容很多会让用户等待很长时间。整个window页面加载完成后才执行，同级谁在前面谁先执行。

2.$(document).ready(function) / $().ready(function) / $(function)方法在DOM完全就绪就执行。比如图片只要标签完成，不用等这个图片加载完成，就可以设置图片的宽高属性或样式等。在document加载完成后就执行，同级谁在前面谁先执行。

3.在标签上静态绑定onload事件，body οnlοad="meathName1();meathName2();">等待body加载完成，就会执行meathName1()方法。在window和dom之后执行，总是最后执行。

$(function(){ console.log("jquery====》document ready3"); }); $(document).ready(function () { console.log("jquery====》document ready2"); }); $().ready(function(){ console.log("jquery====》document ready1"); }); window.onload = function(){ console.log("页面加载完成====》onload2"); } $(window).on('load',function(){ console.log("页面加载完成====》onload1"); }); window.onload = function(){ console.log("页面加载完成====》onload4"); } $(window).on('load',function(){ console.log("页面加载完成====》onload3"); }); function aM(){ console.log("aM"); } function bM(){ console.log("bM"); }

jQuery废弃从jQuery 1.8开始.load(), .unload(), .error()就被废弃了，改用.on()函数来注册。报错信息Uncaught TypeError: url.indexOf is not a function。案例：$(window).load(function);改成$(window).on('load',function) 总结： 1.一般ready 在onload 前加载，如果加载的东西比较少的话，加载顺序是不一定的。可以使用本地jq和远程jq测试。 2.样式控制的，比如图片大小控制，使用$(window).load();jS事件触发的方法，可以在$(document).ready()里面加载。 3.window.onload一次只能保存对一个函数的引用，多次绑定函数会覆盖前面的window.onload绑定的函数。 4.jQuery $(window).load(function)没有OnLoad事件的弊端，多次绑定函数都不会覆盖。 5.body οnlοad="meathName1();meathName2();">这里的函数会覆盖window.onload，但是meathName2不会覆盖meathName1。 6.不同的浏览器body onload>/window.onload和$(window).load(function)的加载顺序不一样。（后期根据不同的浏览器再研究执行顺序）

JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 body οnlοad="">）

博客地址：https://blog.csdn.net/pcaxb/article/details/100661841

【本文地址】

公司简介

联系我们