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

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

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

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

目录

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完全就绪就执行。比如图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高属性或样式等。在document加载完成后就执行,同级谁在前面谁先执行。

3.在标签上静态绑定onload事件,body οnlοad="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>

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值