延迟加载js有哪些方法?
1、defer属性
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
ps:只适用于外部脚本文件,等html全部解析完成,才会执行js代码,顺次执行js脚本
2、async属性
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async ></script>
<script src="test2.js" async ></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
ps:只适用于外部脚本文件,async和html解析是同步的,不是顺次解析js脚本(谁先加载完谁先执行)
3、动态创建DOM方式
<script type="text/javascript">
(function(){
var scriptEle = document.createElement("script");
scriptEle.type = "text/javasctipt";
scriptEle.async = true;
scriptEle.src = "http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js";
var x = document.getElementsByTagName("head")[0];
x.insertBefore(scriptEle, x.firstChild);
})();
</script>
4、使用jQuery的getScript()方法
$.getScript("outer.js",function(){
//回调函数,成功获取文件后执行的函数
console.log("脚本加载完成")
});
5、使用setTimeout延迟方法
<script type="text/javascript">
function testLoad() {
console.log("11"); //.....这里可以写向后端的请求
}
(function(){
setTimeote(function(){
testLoad();
}, 1000); //延迟一秒加载
})()
</script>