js页面加载后执行的几种方式分别是什么-创新互联

js页面加载后执行的几种方式分别是什么，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

成都创新互联专注于企业全网整合营销推广、网站重做改版、闵行网站定制设计、自适应品牌网站建设、html5、商城网站制作、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为闵行等各大城市提供网站开发制作服务。

在实际应用中往往需要在页面加载完毕之后再去执行相关的js代码，之所以这么操作是有道理的，如果是操作dom元素，如果相关元素没有加载完成，而去执行js代码，可能会导致错误，下面就介绍一下如何实现页面加载完成再去执行代码，这是最为基础的知识了，可能初学者还不太了解，寄希望能够给需要的朋友带来一定帮助。

一.window.onload事件:

代码如下:

原生js

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

jquery

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

当页面完全加载完毕之后再去执行code代码。说明页面需要dom操作，必须到最后才可以执行。

二.使用jQuery的ready事件:

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

一般

(function () {//code}})();

当稳当结构加载完毕再去执行code代码。

通用的页面加载后再运行JS有两种方式：1、在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前运行JS。 2、在页面全部内容加载完成（包括引用文件，图片等）之后再加载JS

1、在DOM加载后，全部内容加载前运行这种方式在同一文件中可以运行多个且不会覆盖。

由于在$(document).ready()方法只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完。例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用Jquery中 load（）方法在需要的文件加载完毕后对其进行操作。

$(document).ready(function(){});$().ready(function(){})　　//简写当$()不带参数时默认就是document$(function(){});　　　　　　 //简写

2、在全部内容加载后运行这种方式中只能执行一个 onload代码，当文件由多个onload或者load，只加载最后一个，前面的将会被覆盖且前面的onload里面的代码不会执行。

window.onload = function(){}; // —-js $(window).load(function(){});　　 //---jquery

3、DOM文档加载步骤

1.解析HTML结构2.加载外部的脚本和样式文件3.解析并执行脚本代码4.执行$(function(){})内对应代码5.加载图片等二进制资源6.页面加载完毕，执行window.onload

补充：

1：$(function){};

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

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

4：window.onload = function(){};

5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执行aaa()方法。

注：第1种是第2种的简写方式。两个是document加载完成后就执行方法。第3种和第4种都是等到整个window加载完成执行方法体。两者也没有区别，只是一个使用dom对象，一个使用jQuery对象。

执行顺序：1和2无论放在哪里都是最先执行，3和4在其之后执行，5最后执行

关于js页面加载后执行的几种方式分别是什么问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

网站题目：js页面加载后执行的几种方式分别是什么-创新互联
转载来源：https://www.cdcxhl.com/article32/doeopc.html

成都网站建设公司_创新互联，为您提供服务器托管、企业网站制作、网页设计公司、域名注册、软件开发、虚拟主机

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容