js入口函数与jQuery入口函数

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>

执行结果如下

js入口函数与jQuery入口函数

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>

//执行顺序如下

js入口函数与jQuery入口函数

jQuery的入口函数

$(function(){
    ……//此处是页面DOM加载完成的入口
})
或者
  $(document).ready(function(){
    ……//此处是页面DOM加载完成后的入口
  })

【注意】

1、等着DOM结构渲染完毕即可执行的代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装,相当于原生js的DOMContentLoad

js入口函数与jQuery入口函数

上一篇:【python零基础入门】Python dir()和help()帮助函数


下一篇:WEB与游戏开发的一些区别