时间:2021-05-25
一般来说如果一次性的载入所有需要的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 Documentfunction sayHello(){ alert("Hello World!成功载入JavaScript文件"); }声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS实现文件动态顺序载入的方法。分享给大家供大家参考。具体分析如下:用script标签实现JS代码的动态载入。源于JavaScript语言中函数、
我们经常会发现网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的。所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascri
怎么通过优化的方法提高网站流量?宇凡介绍如下:一、访问速度首先,该网站需要提高网站的主页打开速度。如果网页加载时间过长,过慢,然后打开该网页,因为许多用户不会有
动态载入JavaScript/Csss文件传统加载外部JavaScript(*.js)或者Css(*.css)文件的方法是直接在标签里面进行添加:复制代码代码如
影响建站效果的因素有: 1、网站打开速度 站在用户角度想,谁愿意等待难以打开的网页。网站有过多的FLASH和图片,或者JS文件过多,网页速度打开就很慢。需要