【随笔】js加载
有时候，当发现js操作一个dom的时候，发现dom没有找到，这是由于html没有加载完就开始操作该dom的缘故，所以需要在html文档加载完后再加载js，于是我们可以这么做：
js方法：window.onload
当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。
window.onload=function(){
alert("Hello");
}
jqury方法：
会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所有关联的文件都已经下载完毕。换句话说，当HMTL下载完成并解析为DOM树之后，代码就会执行。
$(document).ready(function(){
alert("Hello!");
});
或者可以简写成：
$(function(){
alert(userName);
});
有时候，当一个网站需要大量js文件的时候，将js文件直接全部在开始就加载进来肯定不合适，也很容易拖慢网站的正常浏览，所以，我们需要在操作中需要到什么js再动态加载js文件。
于是我们这么做：
现在有2个文件，一个html文件a.html，是需要导入的b.js文件，最后是a网页的js文件a.js。
a.html:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta http-equiv="content-script-type" content="text/javascript">
6
7 <title>测试</title>
8
9 <script type="text/javascript" src="a.js"></script>
10 </head>
11
12 <body>
13 <p>测试界面！</p>
14 </body>
15 </html>
a.js:
1 console.log("Hello!");
这时候访问这个网页，将会看到输出：
在b.js中，定义了一个变量m:
1 m = "zhang!!!"
现在，要把b.js通过a.js动态加载到a.html内，在a.js中输出m，于是我们使用方法document.write()将b.js给加载到a内：
a.js：
1 console.log("Hello!");
2 document.write('<script type="text/javascript" src="b.js"></script>');
3 console.log(m);
这时候，访问a.html：
出现一个错误，m找不到！难道是b.js没有加载进来？于是通过调试功能查看一下：
发现b.js已经成功加载了，那么为什么没有找到m呢？
于是去查了一下，原来document.write()方法是通过异步加载的，如果在调用m的时候，b.js还没有加载进来，那必然就无法找到m了。
于是我去找一个能够同步加载的办法，这样就让我找到了jquery的一个方法"$(document).append()"：
于是把a.js改为：
1 console.log("Hello!");
2 $(document).append("<script type='text/javascript' src='b.js'</script>");
3 console.log(m);
再访问a.html:
m能够正常找到了，问题解决！！
如此一来，我就可以在程序中通过调用方法，动态的在需要的时候加载需要的js，不必在开始加载html文档的时候就把所有js都加载进来了。
jquery也有一种方法能够异步加载js文件：
jquery.getScript()
通过 AJAX 请求来获得并运行一个 JavaScript 文件
jQuery.getScript(url,success(response,status))
【随笔】js加载的更多相关文章
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
- JS 加载html 在IE7 IE8下 可调试
实际背景 就是都是HTML 公共头部底部 然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...
- 解决JS加载速度慢
在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...
- FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据
前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...
- [f]动态判断js加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- 使用js加载器动态加载外部Javascript文件
原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...
- (转)JS加载顺序
原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...
- JS加载时间线
1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中.这个阶段document.readyState = 'loading' ...
- 动态加载JS过程中如何判断JS加载完成
在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...
- 使用js加载图像和setDataXML()加载数据
使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...
随机推荐
- Android test---robotium----简单例子
1.首先新建一个要被测试的工程,命名为”robotium“:一个很简单的Android 应用程序:主页面只有个 TextView 控件: 2. 在建一个用于测试的工程 ,命名为”robotiumTes ...
- WCF ajax跨域配置
webconfig必须配置 binding="webHttpBinding" <service name="Hezi.MsgService.Send"&g ...
- TCP/IP之大明内阁---协议的制定
个人感言:真正的知识是深入浅出的,码农翻身" 公共号将苦涩难懂的计算机知识,用形象有趣的生活中实例呈现给我们,让我们更好地理解.感谢"码农翻身" 公共号,感谢你们的成果, ...
- redis集群同步迁移方法（二）：通过redis-migrate-tool实现
前篇介绍的redis replication方法,操作步骤多,而且容易出错.在git上看到一些开源工具也能实现同步迁移功能,而且步骤简单,比如redis-port,redis-migrate-tool ...
- WeedFS依赖库 0.6.1
WeedFS依赖库 版本 0.6.1 =======================================================================glog====== ...
- Kafka报错-as it has seen zxid 0x83808 our last zxid is 0x0 client must try another server
as it has seen zxid 0x83808 our last zxid is 0x0 client must try another server 停止zookeeper,删除datadi ...
- nmon工具的安装及简单使用
1.工具的安装 下载rpm包安装即可http://mirror.ghettoforge.org/distributions/gf/el/6/gf/x86_64/nmon-14i-1.gf.el6.x8 ...
- sql join用法学习
为了在两个或更多的表中获取结果,我们常常会用到join inner join(又叫join) out join包括left join,right join和full join(也就是left+righ ...
- IA32寄存器与x86-64寄存器的区别
IA32寄存器 一个IA32CPU包含一组8个存储32位值的通用寄存器,这些寄存器用来存储整数数据和指针: 31-0 15-0 15-8 7-0 使用惯例 %eax %ax %ah %al 调用者保存 ...
- JAVA反射实践
Java反射机制在我的理解当中就是下面几点: 1. 对一个给定的类名(以字符串形式提供)能动态构建一个对象实例 2. 对于任意一个类,都能够知道这个类的所有属性和方法 3. 对于任意一个对象, ...