如何让页⾯加载完成后执⾏js
在很多情况下，js代码需要设置为在页⾯加载之后才去执⾏，如果在页⾯没有加载完毕就执⾏js代码，很容易出现报错情况，因为页⾯中的某些dom根本没有加载完毕。本⽂章向⼤家介绍如何让js脚本在页⾯加载完后再执⾏的⼏种⽅法。需要的朋友可以参考⼀下。
javascript 当页⾯dom模型加载完成后才执⾏javascript
不能使⽤<body onload="">
加上 defer 等于在页⾯完全在⼊后再执⾏，相当于 load ，但应⽤上⽐ load 更灵活alert怎么读
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" /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：load
<script type=”text/javascript”>
var userName=”xiaoming”;
alert(userName);
}
</script>
但这个⽅法在IE中只能在⼀个地⽅调⽤，假如2个地⽅调⽤，后⾯调⽤的就会把前⾯的添加的覆盖掉；
⽅法3：jQuery⽅法，需要引⽤jQuery⽂件。
<script type=”text/javascript”>
$(document).ready(function (){
var userName=”xiaoming”;
alert(userName);
});
</script>
下⾯我们介绍⼀下load=function (){}与$(document).ready(function (){})的区别：
在Jquery⾥⾯，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})
这两个⽅法的效果都是⼀样的，都是在dom⽂档树加载完之后执⾏⼀个函数（注意，这⾥⾯的⽂档树加载完不代表全部⽂件加载完）。
⽽load是在dom⽂档树加载完和所有⽂件加载完之后执⾏⼀个函数。也就是说$(document).ready要⽐
那么Jquery⾥⾯$(document).ready函数的内部是怎么实现的呢？下⾯我们就来看看：
我们来为document添加⼀个ready函数：
///兼容FF,Google
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', function () {
callback();
}, false)
}
//兼容IE
else if (document.attachEvent) {
document.attachEvent('onreadystatechange', function () {
if (adyState == "complete") {
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
})
}
else if (document.lastChild == document.body) {
callback();
}
}
alert('onload');
};
alert('ready');
});
执⾏这段代码之后，你会看到浏览器⾥⾯会先弹出“ready”，在弹出onload。
这个⼤家还是亲⼿试试吧！

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