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

转载请注明预见才能遇见的博客: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>
<!-- 本地jq -->
<!-- <script type="text/javascript" src="./js/jquery-3.2.1.js"></script> -->
<!-- 远程jq -->
<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




            
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pcaxb/article/details/78224443
个人分类: JS-原生
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭