웹 페이지 열기 속도를 향상하기 위해 js를 동적으로 로드하는 방법_javascript 기술
- WBOY원래의
- 2016-05-16 16:42:311096검색
일반적으로 필요한 모든 JavaScript 코드를 한 번에 로드하면 초기 웹페이지가 느리게 열리게 됩니다. 그러나 로드된 코드 중 많은 부분을 사용할 필요는 없습니다. 이러한 불필요한 성능 낭비는 피해야 합니다. . JavaScript 코드를 동적으로 로드하려면 DOM 모델을 사용하여 HTML 문서에 3f1c4e4b6b16bbbd69b2ee476dc4f83a 노드를 추가하고 이 노드(예: 외부 Javascript 파일)의 src 속성을 필요한 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文件");
}
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.