如果一次载入所有需要的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文件");
}
转自：
http://hi.baidu.com/zhouwanquan/blog/item/cfef9d1666025253f2de328b.html
分享到：
相关推荐
网页打开速度是用户体验的重要组成部分，快速的...以上这些方法都是为了优化网页性能，提高网页打开速度。每一点改进都可能带来明显的速度提升，结合使用效果更佳。定期进行性能测试，持续优化，才能不断提升用户体验。
8. **网页性能优化**：包括图片优化、减少HTTP请求、缓存策略等，以提升网页加载速度和用户体验。 通过研究这两个网站的源代码，我们可以学习到实际项目中如何综合运用HTML、CSS、JavaScript和Flash技术，同时也能...
8. **调试工具**：利用IE9和IE10内置的开发者工具（按下F12键打开），可以查看CSS的加载状态，帮助定位问题。 通过以上方法，你应该能解决大部分IE9和IE10的CSS加载问题。当然，考虑到IE浏览器市场份额的持续下降，...
3. **加载页面动画**：当用户打开一个网页时，加载页面动画可以提供视觉反馈，显示页面正在加载，提升用户体验。这些动画通常由CSS实现，能够通过简单的代码创造出吸引人的过渡效果。 4. **CSS动画原理**：CSS动画...
这意味着在设计时，已考虑了触摸事件、较小的屏幕尺寸以及优化的加载速度，以确保在移动设备上流畅运行。 7. **网页源码**：源码是网站的基石，提供了对网站每个细节的完全控制。开发者可以根据需求修改源码，添加...
- 用户再次打开页面时，如果存在之前的记录，JavaScript会从localStorage加载并显示。 **总结** 通过这个“js之能力提高——网页记事本”项目，我们可以深入理解JavaScript、HTML和CSS在实际项目中的协同工作。...
标题与描述：“打开网页很慢,怎样提高速度呢”这一问题直指许多互联网用户在浏览网页时遇到的普遍困扰——网页加载速度缓慢。这不仅影响用户体验，还可能对网站的SEO排名产生负面影响。因此，掌握如何提高网页打开...
在实际项目中，许多知名网站和应用都采用了独特的加载效果，如Facebook的无限滚动加载、Instagram的照片加载动画等，这些都是提高用户参与度的有效策略。 总之，H5多种加载效果是提升网页体验的重要手段，它们不仅...
【标题】：“13种CSS3网页加载进度条效果” 在网页设计中，加载进度条是一种常见的用户体验元素，它能够向用户展示数据加载的进度，缓解用户等待时的焦虑感。CSS3作为现代Web设计的强大工具，提供了丰富的样式和...
使用这些工具，开发者可以编写代码来打开网页，等待JavaScript执行，然后提取所需的数据。 以下是一个简单的.NET爬虫示例，使用Selenium抓取动态加载内容： ```csharp using OpenQA.Selenium; using OpenQA....
本教程将详细讲解如何利用 JavaScript 和 CSS 来实现在网页上的换肤功能。 首先，CSS（层叠样式表）用于定义网页的布局和样式。我们可以创建多个 CSS 文件，每个文件代表一种皮肤。例如，可以有 `skin1.css`、`skin...
【标题】"CSS3 Loading英文加载动画效果"指的是利用CSS3技术实现的一种视觉反馈机制，通常在网页内容尚未完全加载时显示，以告知用户页面正在处理数据并提示他们耐心等待。这种加载动画不仅提升了用户体验，还能使...
本资源"纯CSS3书本打开动画加载特效"提供了一种创新的方式，利用CSS3的强大功能，实现了书本翻页的加载动画效果，无需依赖jQuery或其他JavaScript库，减少了额外的性能开销，对于移动设备友好。 CSS3是 Cascading ...
`<thead>`, `<tbody>`和`<tfoot>`分别定义表头、主体和页脚，提高页面加载效率。 超链接`<a>`的`href`属性指定链接目标，可以是URL、邮件地址或其他页面内的定位。`target`属性决定新链接在何处打开，`_blank`表示...
一旦页面加载完成，可以通过调用EvaluateScript方法执行JavaScript代码，获取网页的innerHTML或outerHTML属性，这将包含网页的源代码。 此外，考虑到用户可能需要查看或编辑源码，你可能还需要实现一个界面元素，如...
此外，为了优化加载速度和减少HTTP请求，可能需要进行图片压缩、CSS和JavaScript的合并与压缩等前端性能优化技巧。 总的来说，884_HTML手机电脑网站网页源码移动端前端_H5模板_自适应响应式源码是一个强大的工具，...
在学习前端开发时，理解并熟练掌握HTML5、CSS和JavaScript这三者的结合至关重要，它们共同构成了网页的静态结构、视觉样式和动态行为。不断练习和实践，才能更好地运用这些知识创建出美观、交互性强的网页。
当用户打开一个网页时，如果内容需要时间加载，预加载指示器会显示在页面上，告知用户页面正在加载，提高用户的耐心和满意度。CSS3的引入，让开发者可以通过编写简单的代码实现复杂的动画效果，而无需依赖JavaScript...
1、由于是英文网站，有的朋友下了某些HTML模板不知道怎么修改，可以百度Dreamweaver网站制作软件下载安装，打开网页后即可以可视化操作修改。 2、由于低版本IE不支持HTML5和CSS3技术，对于部分HTML5模板在IE6、7、8...