如何让页面加载完成后执行js
投稿：jingxian
在很多情况下，js代码需要设置为在页面加载之后才去执行，如果在页面没有加载完毕就执行js代码，很容易出现报错情况，因为页面中的某些dom根本没有加载完毕。本文章向大家介绍如何让js脚本在页面加载完后再执行的几种方法。需要的朋友可以参考一下。
javascript 当页面dom模型加载完成后才执行javascript
不能使用<body onload="">
加上 defer 等于在页面完全在入后再执行，相当于 window.onload ，但应用上比 window.onload 更灵活
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<script defer="defer">
alert("页面加载完我才执行的")
</script>
先看到这段话 然后再执行上面的 JS 如果去掉上面的 defer="defer" 那么会先执行JS 在看到这段话
</body>
</html>
方法1：使用defer
<script defer="defer" language="javascript"></script>
//或者
<script defer language="javascript"></script>
但这种方法只有IE支持，其他浏览器不识别defer 这种方法不靠谱
方法2：window.onload
<script type=”text/javascript”>
window.onload=function (){
var userName=”xiaoming”;
alert(userName);
}
</script>
但这个方法在IE中只能在一个地方调用，假如2个地方调用，后面调用的就会把前面的添加的覆盖掉；
方法3：jQuery方法，需要引用jQuery文件。
<script type=”text/javascript”>
$(document).ready(function (){
var userName=”xiaoming”;
alert(userName);
});
</script>
下面我们介绍一下Window.onload=function (){}与$(document).ready(function (){})的区别：
在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。
而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。
那么Jquery里面$(document).ready函数的内部是怎么实现的呢？下面我们就来看看：
我们来为document添加一个ready函数：
document.ready = function (callback) {
///兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
document.removeEventListener('DOMContentLoaded', arguments.callee, false);
callback();
}, false)
}
//兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (document.readyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”：
window.onload = function () {
alert('onload');
};
document.ready(function () {
alert('ready');
});
执行这段代码之后，你会看到浏览器里面会先弹出“ready”,在弹出onload。
这个大家还是亲手试试吧！