两种⽅法实现在HTML页⾯加载完毕后运⾏某个js
js⽅法：
复制代码代码如下:
<script type="text/javascript">
var userName="xiaoming";
alert(userName);
}
</script>
以下为jQuery⽅法，需要引⽤jQuery⽂件。
复制代码代码如下:
<script type="text/javascript">
$(document).ready(function(){
var userName="xiaoming";
alert(userName);
});
</script>
或者其简写
复制代码代码如下:
$(function(){
var userName="xiaoming";
alert(userName);
});
当dom加载完就可以执⾏（⽐load更早）。在同⼀个页⾯⾥可以多次出现.ready()
PS：两者的主要区别
当⼀个⽂档完全下载到浏览器中时，才会触发load事件。这意味着页⾯上的全部元素对js⽽⾔都是可以操作的，也就是说页⾯上的所有元素加载完毕才会执⾏。这种情况对编写功能性代码⾮常有利，因为⽆需考虑加载的次序。、
$(document).ready{ }：
会在DOM完全就绪并可以使⽤时调⽤。虽然这也意味着所有元素对脚本⽽⾔都是可以访问的，但是，并不意味着所有关联的⽂件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执⾏。
举⼀个例⼦：
假设有⼀个表现图库的页⾯，这种页⾯中可能会包含许多⼤型图像，我们可以通过jQuery隐藏、显⽰或以其他⽅式操作这些图像。如果我们通过onload页⾯设置界⾯，那么⽤户在能够使⽤这个页⾯之前，必须要等到每⼀幅图像都下载完成。更糟糕的是，如果⾏为稍微添加给哪些具有默认⾏为的元素(⽐如链接)，那么⽤户的交互可能会导致意想不到的结果。然⽽当我们试⽤$(document).ready(){ }进⾏设置时，这个界⾯就会更早地准备好可⽤的正确⾏为。
使⽤$(document).ready(){ }⼀般来说都要优于试⽤onload事件处理程序，但必须要明确⼀点的是，因为⽀持⽂件可能还没有家在完成，所以类似图像的⾼度和宽度这样的属性此时不⼀定有效。
注：⽤把js放在页⾯底部的⽅法以及运⽤defer="defer" 的⽅法都是会出现问题的。最好使⽤上⾯的函数！
>网站底部代码js特效

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