怎样使页面加载完再执行js代码
由于HTML页面的加载顺序是从上到下,所以js代码要写在页面靠下的位置,否则可能会发生元素获取不到的问题,为了避免这种情况,可以通过页面元素加载完之后,再执行js代码,这样即使代码写在html元素前面也没有问题。
一、在原生js中,在页面所有元素加载完执行js代码 如下:
1.使用load事件
<script>window.addEventListener('load', function() {//js代码});</script>
2.使用DOMContentLoaded事件
<script>document.addEventListener('DOMContentLoaded', function() {//js代码});</script>
以上两种区别:
window.load是在窗口加载事件,是文档所有内容(图像、js文件、css文件等)都加载完成后才触发。只能写一次,如果注册多个事件则会以最后注册的为准,后者覆盖前者。
document.addEventListener窗口加载事件,在DOM加载完成就会触发,不包括样式图片动画等。
二、jQuery入口函数 如下
1.$(document).ready
<script>$(document).ready(function() {//js代码});</script>
2.上一中的简写,推荐写法
<script>$(function() {//js代码});</script>
jQuery的入口函数相当于原生js中的document.addEventListener,在DOM加载完成就会触发,不包括样式图片动画等。