js动态加载提高网页加速源码下载

通常情况下，如果网页加载的js文件较多，并且一次性加载完毕的话，会非常的影响网页加载的速度，当然将会严重影响用户体验，最终会影响的站点的人气，所以我们要想办法解决这个问题。很多时候，加载的js代码在当前页面功能中并不需要，所以如果能够根据需要动态的加载js文件，那么将会极大的提高网页的加载速度，下面就通过代码实例介绍一下如何动态加载js。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="https://www.51qianduan.com/" />  
<title>51前端</title>  
<script type="text/javascript"> 
function JsLoader(){ 
  this.load=function(url){ 
    var script=document.getElementsByTagName("script"); 
    for (index=0;index<script.length;index++){ 
      if(script[index].src && script[index].src.indexOf(url)!=-1){ 
        this.onsuccess(); 
        return; 
      } 
    } 
    scriptEle=document.createElement("script"); 
    scriptEle.type="text/javascript"; 
    scriptEle.src=url; 
    var head=document.getElementsByTagName("head")[0]; 
    head.appendChild(scriptEle); 
    var self=this; 
    scriptEle.onload=function(){ 
      self.onsuccess(); 
    } 
    scriptEle.onerror=function(){
      head.removeChild(scriptEle); 
      self.onfailure(); 
    } 
  }; 
  this.onsuccess=function(){}; 
  this.onfailure=function(){}; 
} 
  
function btnClick(){ 
  var jsLoader=new JsLoader(); 
  jsLoader.onsuccess=function(){ 
    sayHello(); 
  } 
  jsLoader.onfailure=function(){ 
    alert("文件载入失败！"); 
  } 
  jsLoader.load("https://www.61qianduan.com/mytest/js/antzone.js"); 
}
  
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    btnClick();
  }
}
</script> 
</head> 
<body> 
<label> 
<input type="button" id="bt" value="加载js文件"> 
</label> 
</body> 
</html>

上面你的代码实现了动态js文件加载效果，也就是当需要的时候再去加载js文件，而不是一股脑的完全加载完毕。

antzone.js文件中的代码如下:

[ 其他 ] 运行代码下载代码

<script>
function sayHello(){ 
  alert("51前端欢迎您，js文件加载完毕");   
}
</script>

代码描述：js动态加载提高网页加速。js动态加载提高网页加速源码下载

下载全部收藏

107 143

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

522688

作品：1334 | 粉丝：44

关注

TA的相关作品 >>更多

热搜关键词

提高网页加速

js动态加载提高网页加速源码下载

js自定义回调函数代码下载

js页面加载完毕自动执行源码实例

setTimeout()函数延迟循环语句异常简单介绍

arguments对象函数传递参数简单介绍

JavaScript绘制sin正弦函数曲线源码下载

IE浏览器下js无法获取隐藏图片尺寸简单介绍