动态载入js提高网页打开速度的方法

一般来说如果一次性的载入所有需要的JavaScript代码,就会造成初始网页打开速度变慢,但是很多载入的代码又并不需要使用,这种无谓的性能浪费应该予以避免。如果要动态载入JavaScript代码,可以利用DOM模型在HTML文档中添加<script>结点,并将此结点的src属性(即 外联 Javascript文件)设置为需要动态载入的JavaScript代码。

下面就是完成这样功能的一个示例:

(1)、新建JsLoaderTest.html文件

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>按需载入JavaScript代码的例子</title>

<script type="text/javascript">

function JsLoader(){

this.load=function(url){

//获取所有的<script>标记

var ss=document.getElementsByTagName("script");

//判断指定的文件是否已经包含,如果已包含则触发onsuccess事件并返回

for (i=0;i<ss.length;i++){

if (ss[i].src && ss[i].src.indexOf(url)!=-1){

this.onsuccess();

return;

}

}

//创建script结点,并将其属性设为外联JavaScript文件

s=document.createElement("script");

s.type="text/javascript";

s.src=url;

//获取head结点,并将<script>插入到其中

var head=document.getElementsByTagName("head")[0];

head.appendChild(s);

//获取自身的引用

var self=this;

//对于IE浏览器,使用readystatechange事件判断是否载入成功

//对于其他浏览器,使用onload事件判断载入是否成功

//s.onload=s.onreadystatechange=function(){

s.onload=s.onreadystatechange=function(){

//在此函数中this指针指的是s结点对象,而不是JsLoader实例,

//所以必须用self来调用onsuccess事件,下同。

if (this.readyState && this.readyState=="loading") return;

self.onsuccess();

}

s.onerror=function(){

head.removeChild(s);

self.onfailure();

}

};

//定义载入成功事件

this.onsuccess=function(){};

//定义失败事件

this.onfailure=function(){};

}

function btnClick(){

//创建对象

var jsLoader=new JsLoader();

//定义载入成功处理程序

jsLoader.onsuccess=function(){

sayHello();

}

//定义载入失败处理程序

jsLoader.onfailure=function(){

alert("文件载入失败!");

}

//开始载入

jsLoader.load("hello.js");

}

</script>

</head>

<body>

<label>

<input type="submit" name="Submit" onClick="javascript:btnClick()" value="载入JavaScript文件">

</label>

</body>

</html>

(2)、新建hello.js文件,包含如下代码:

// JavaScript Document

function sayHello(){

alert("Hello World!成功载入JavaScript文件");

}

// JavaScript Document

function sayHello(){

alert("Hello World!成功载入JavaScript文件");

}

以上是 动态载入js提高网页打开速度的方法 的全部内容, 来源链接: utcz.com/z/326144.html

回到顶部