js入口函数(窗口加载事件)
第一种:当文档内容完全加载完成后触发的事件(包括图像、脚本文件、CSS文件等),就调用的处理函数
window.onload = function() {}//推荐使用 或者
window.addEventListener("load", function() {})
第二种:仅当DOM加载完成,不包括样式表、图片、flash等等
window.addEventListener("DOMContentLoaded", function() {})
【注意】
1、有了窗口(页面)加载事件,就可以把js代码写到页面元素代买的上方,因为等页面内容全部加载完毕才去执行处理函数
2、window.onload传统注册事件方式只能写一次,如果有多个,会以最后一个window.onload为准,但如果使用addEventListener则没有限制。
<script> window.onload = function() { console.log("onload_1"); }//第一个加载事件将不被执行 window.onload = function() { console.log("onload_2"); } </script>
执行结果如下
3、如果页面的图片很多的话,从用户访问到onload触发可能需要较长时间,交互效果就不能实现,必然影响用户的体验,此时用DOMContentLoaded事件比较合适
4、DOMContentLoaded是DOM加载完毕,不包含图片、图片、flash等等就可以执行,加载速度比load更快一些。
如下列代码的执行顺序
//书写顺序如下:
<script> window.addEventListener("load", function() { alert(‘load_1‘); }) window.addEventListener("load", function() { console.log(‘load_2‘); }) window.addEventListener("DOMContentLoaded", function() { alert(‘DOMContentLoaded_3‘); }) </script>
//执行顺序如下
jQuery的入口函数
$(function(){ ……//此处是页面DOM加载完成的入口 })
或者
$(document).ready(function(){
……//此处是页面DOM加载完成后的入口
})
【注意】
1、等着DOM结构渲染完毕即可执行的代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装,相当于原生js的DOMContentLoad