【随笔】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 ...
随机推荐
- MyBatis学习总结(七)——Mybatis缓存（转载）
孤傲苍狼 只为成功找方法,不为失败找借口! MyBatis学习总结(七)--Mybatis缓存 一.MyBatis缓存介绍 正如大多数持久层框架一样,MyBatis 同样提供了一级缓存和二级缓存的 ...
- asp.net js 跨域方法二
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="view ...
- tcp协议头窗口，滑动窗口，流控制，拥塞控制关系
参考文章 TCP 的那些事儿(下) http://coolshell.cn/articles/11609.html tcp/ip详解--拥塞控制 & 慢启动 快恢复 拥塞避免 http://b ...
- linux系统limit知识
1.limit限制每个shell进程和它的子进程对资源的占用.每个登录,还是每个进程? 比如ulimit -n 10240 可以临时改变当前session的shell进程的文件句柄数限制,退出当前窗口 ...
- python学习：环境搭建
1.图解eclipse环境下安装python3.x插件支持:http://www.tuicool.com/articles/M3Afyu 其中如果 然后,选择Add按钮,Name:Python3,Lo ...
- 是德科技完成对Anite的收购
是德科技公司(NYSE:KEYS)日前宣布已经完成对Anite 的收购行动.Anite 是业界领先的无线研发软件解决方案供应商.是德科技通过支付大约6 亿美元现金将其收入麾下,旨在支持是德科技发展无线 ...
- TortoiseGit 图标不显示
1. 确认注册表:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\ShellIconOverlayIdent ...
- hql between and 查询
public IList<PrdtStdEntity> QueryPrdtStd(PrdtStdEntity prdtStdEntity) { try { var hql = " ...
- JS 中 new 操作符
按照javascript语言精粹中所说,如果在一个函数前面带上new来调用该函数,那么将创建一个隐藏连接到该函数的prototype成员的新对象,同时this将被绑定到那个新对象上.这个话很抽象,我想 ...
- HTTP权威指南笔记-1.概述
1.1 通讯 Web内容是存储在服务器上的,Web服务所使用的是HTTP协议,所以经常称为HTTP服务器.通讯过程为客户端(正常我们所使用的)发出请求,服务端根据客户端的HTTP请求响应相应数据,这就 ...