js页⾯加载后执⾏的⼏种⽅式⼩结
在实际应⽤中往往需要在页⾯加载完毕之后再去执⾏相关的js代码，之所以这么操作是有道理的，如果是操作dom元素，如果相关元素没有加载完成，⽽去执⾏js代码，可能会导致错误，下⾯就介绍⼀下如何实现页⾯加载完成再去执⾏代码，这是最为基础的知识了，可能初学者还不太了解，寄希望能够给需要的朋友带来⼀定帮助。
⼀.load事件:
代码如下:
原⽣js
//code
}
jquery
$(window).load(function(){
//code
});
当页⾯完全加载完毕之后再去执⾏code代码。说明页⾯需要dom操作，必须到最后才可以执⾏。
⼆.使⽤jQuery的ready事件:
$(document).ready(function() {
//code
});
⼀般
(function () {
//code原生js和js的区别
}
})();
当稳当结构加载完毕再去执⾏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).load(function(){});  //---jquery
3、DOM⽂档加载步骤
1.解析HTML结构
2.加载外部的脚本和样式⽂件
3.解析并执⾏脚本代码
4.执⾏$(function(){})内对应代码
5.加载图⽚等⼆进制资源
6.页⾯加载完毕，执⾏load
补充：
1：$(function){};
2：$(document).ready(function(){});
3：$(window).load(function(){});
4：load = function(){};
5：在标签上静态绑定onload事件，<body onload="aaa()">等待body加载完成，就会执⾏aaa()⽅法。
注：第1种是第2种的简写⽅式。两个是document加载完成后就执⾏⽅法。第3种和第4种都是等到整个window加载完成执⾏⽅法体。两者也没有区别，只是⼀个使⽤dom对象，⼀个使⽤jQuery对象。
执⾏顺序：1和2⽆论放在哪⾥都是最先执⾏，3和4在其之后执⾏，5最后执⾏

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。