原文网址：JS--页面加载完毕后执行_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍JavaScript如何在页面加载完毕之后执行函数。

页面加载完毕主要有两个事件：

DOMContentLoaded事件：页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
onload事件：页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。

浏览器现象

DOMContentLoaded事件：在Overview和Waterfall上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

onload事件：在Overview和Waterfall上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

方案1：原生JS

法1：DOMContentLoaded 事件

DOMContentLoaded 事件：页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

jquery中使用的$(document).ready(function(){}); 实际上监听的就是 DOMContentLoaded 事件。

function domReady(fn){//对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式if (document.addEventListener) {document.addEventListener("DOMContentLoaded", fn, false);// 不能这样写：window.onDOMContentLoaded} else {IEContentLoaded(fn);}//IE模拟DOMContentLoadedfunction IEContentLoaded (fn) {var doc = window.document;var done = false;//只执行一次用户的回调函数init()var init = function () {if (!done) {done = true;fn();}};(function () {try {// DOM树未创建完之前调用doScroll会抛出错误d.documentElement.doScroll('left');} catch (e) {//延迟再试一次~setTimeout(arguments.callee, 50);return;}// 没有错误就表示DOM树创建完毕，然后立马执行用户回调init();})();//监听document的加载状态doc.onreadystatechange = function() {// 如果用户是在domReady之后绑定的函数，就立马执行if (doc.readyState == 'complete') {doc.onreadystatechange = null;init();}}}
}

法2：onload事件

onload事件：页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。

window.onload = function(){...
}

或者

window.addEventListener('load',  function(){...
})

方案2：jQuery

法1：ready()函数

说明

页面的DOM加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。

实际上监听的就是 DOMContentLoaded 事件。

代码

写法一：标准写法

$(document).ready(function(){...
});

写法二：简写

$(function(){....
})

法2：load()函数

页面所有资源（包括DOM树、CSS、图片、第三方框架等）加载完毕时触发。

实际上监听的就是 onload 事件。

$(window).load(function(){...
});

其他网址

JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点_poorpenguin的博客-CSDN博客

JS--页面加载完毕后执行相关推荐

html5页面加载执行动作,页面加载完成后执行JS的5种方式
在js和jquery使用中,常用到页面加载完成后执行某一方法.经过整理,大概是五种方式.javascript 1.jQuery的$( function(){} );html 2.jQuery的$(do ...
js 和jQuery（自动执行函数）立即执行函数和页面加载完后执行函数写法
js 立即执行函数的写法. js 立即执行函数只能用于匿名函数,如果声明了函数名是不可以用立即执行的,通常在函数表达式后加一对小括号()用于立即执行如果想让函数不被调用的情况下,立即自动执行,需要在 ...
vue组件加载完成之后执行方法_vuejs页面加载完成后执行函数
module.exports = { data: function(){ return { memberQrcodeState: false } }, components: {memberQrcod ...
js页面加载完成后自动执行指定方法
1.要执行的代码是在DOM元素被加载完成的情况下执行,同一个页面可以反复调用该方法,会按照先后顺序依次执行 //jquery提供的完整方法 $(document).ready(function () ...
两种方法实现在HTML页面加载完毕后运行某个js
Js方法: <script type="text/javascript">window.onload=function (){var userName="xi ...
jquery文档加载完毕后执行的几种写法
2019独角兽企业重金招聘Python工程师标准>>> 1.js文档加载完毕标签内 οnlοad="test()" window.οnlοad=function ...
【解决方案】如何实现在HTML页面加载完毕后运行某个js
前景: 今天在开发过程中,发现我js文件里面的方法没有响应,后来发现是js在html中引入的位置不对.我在head中加载了js,导致我js中的document.getElementById方法失效.因 ...
dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法？
最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通 ...
HTML页面加载完毕后，再运行JS业务

JS--页面加载完毕后执行

简介