您的位置：首页 > Web前端 > JavaScript

页面加载完成之后执行js函数window.onload 和 $().ready(function) 以及 <body onload="">的同级函数详解

2017-10-13 11:54 1141 查看

转载请注明预见才能遇见的博客：http://my.csdn.net/
原文地址：http://blog.csdn.net/pcaxb/article/details/78224443

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>



<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(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");
}

</script>

<body onload="aM();bM();">

</body>
</html>

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

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 onload="meathName1();meathName2();">这里的函数会覆盖window.onload，但是meathName2不会覆盖meathName1。
6.不同的浏览器<body onload>/window.onload和$(window).load(function)的加载顺序不一样。

后期根据不同的浏览器再研究执行顺序...

页面加载完成之后执行js函数window.onload 和 $().ready(function) 以及 <body onload="">的同级函数详解
博客地址：http://blog.csdn.net/pcaxb/article/details/78224443

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 页面加载完成之后执行js函数 window.onload .readyfunction body onload

相关文章推荐

新的分享

章节导航