异步加载JS

JS异步加载

JS异步加载的三种形式

  1. defer (IE专属)
    要等到dom文档全部解析完才会被执行
<script type="text/javascript" src="demo.js" defer="defer"> </script>
 或者
<script defer="defer">
			 var a=123;
			</script>
  1. async
    加载完就执行, async只能加载外部脚本,不能把js写在标签内
<script type="text/javascript" src="demo.js" async="async"> </script> 

3.创建script,插入到dom树中,加载完毕后callback

function scriptCreate(url,callback){
				var script=document.createElement('script');
				script.type="text/javascript";
				if(script.readyState){
					script.onreadystatechange=function(){   //ie
						if(script.readyState=="complete"||script.readyState=="loaded"){
									callback();
						}
                  }
				}else{
					script.onload=function(){        //safari chrome firefox opera
						callback();
					}
				}
				script.src=url;        //不放前面的原因是如果这个语句执行太快然后readystate变化的太快 没等事件绑定完就已经变化了  那就检测侧不到onreadystatechange的变化 那就执行不了函数。
				document.head.appendChild(script);
			}
			scriptCreate("demo.js",function(){hello();}); //不能直接传hello();因为调用函数的时候还不知道hello这个函数是不是存在于script里面,所以会找不到hello,如果
    原文作者:weixin_44428199
    原文地址: https://blog.csdn.net/weixin_44428199/article/details/116126120
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞