有时候，当发现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加载的更多相关文章

  1. 优化JS加载时间过长的一种思路

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...

  2. JS 加载html 在IE7 IE8下 可调试

    实际背景 就是都是HTML 公共头部底部  然后中间部分加载不同的HTML文件 有点跟模板引擎一样 jQuery 有个load函数 加载html文件的路径 获取html内容 到中间部分 正常下是不能用 ...

  3. 解决JS加载速度慢

    在网页中的js文件引用会很多,js引用通常为 <script src="xxxx.js"></script> 通过如下方法可以增加js加载速度 <sc ...

  4. FusionCharts简单教程(二)-----使用js加载图像和setDataXML()加载数据

          前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<EMBED>标记来加载图形的,但是这 ...

  5. [f]动态判断js加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  6. 使用js加载器动态加载外部Javascript文件

    原文:http://www.cnblogs.com/xdp-gacl/p/3927417.html 今天在网上找到了一个可以动态加载js文件的js加载器,具体代码如下: JsLoader.js var ...

  7. (转)JS加载顺序

    原文:http://blog.csdn.net/dannywj1371/article/details/7048076 JS加载顺序 做一名合格的前端开发工程师(12篇)——第一篇 Javascrip ...

  8. JS加载时间线

    1.创建Document对象,开始解析web页面.解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中.这个阶段document.readyState = 'loading' ...

  9. 动态加载JS过程中如何判断JS加载完成

    在正常的加载过程中,js文件的加载是同步的,也就是说在js加载的过程中,浏览器会阻塞接下来的内容的解析.这时候,动态加载便显得尤为重要了,由于它是异步加载,因此,它可以在后台自动下载,并不会妨碍其它内 ...

  10. 使用js加载图像和setDataXML()加载数据

    使用js加载图像和setDataXML()加载数据 前面一篇对FusionCharts进行了一个简单的介绍,而且建立了我们第一个图形,但是那个是在HTML中使用<OBJECT>和<E ...

随机推荐

  1. linux mail 使用外部邮箱地址发邮件

    centos 61.系统yum安装的mailx会默认使用本地sendmail发送邮件,这样要求本地的机器必须安装和启动Sendmail服务,配置麻烦,而且会带来不必要的资源占用.通过修改配置文件可以使 ...

  2. js变量搜索(先局部，后全局；先解析，后赋值)

    var a=10; (function(){ alert(a); })() 变量先搜索局部,没有局部变量,会搜索全局变量 var a=10; (function(){ var a=20; alert( ...

  3. Debian7下lnmp+gunicorn部署Django运行环境

    首先安装lnmp,安装方法见lnmp.org wget -c http://soft.vpser.net/lnmp/lnmp1.3-full.tar.gz && tar zxf lnm ...

  4. 10款让WEB前端开发人员更轻松的实用工具

    这篇文章介绍10款让Web前端开发人员生活更轻松的实用工具.每个Web开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具,所以如 ...

  5. Ajax方法封装

    打算自己封装一个ajax方法,再不用jq库的情况下,直接引用: ajax作用:数据交互,在不刷新页面的情况下,发送请求,获取数据: 首页第一步常见一个ajax对象:XMLHttpRequest,之后会 ...

  6. 错误C4146的解决方法

    error C4146: 一元负运算符应用于无符号类型,结果仍为无符号类型: 那么什么情况下会遇见这种错误呢,例如下代码: 错误代码1:int number = -2147483648; //erro ...

  7. jquery 使用方法(一)

    jquery是什麼? jquery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的函數库. javascript是屬於網絡的腳本語言,宿主文件是html, ...

  8. MySql开始日期、结束日期查询

    str_to_date('2016-08-24', '%Y-%m-%d %H') validStartTime str_to_date('2016-09-16', '%Y-%m-%d %H') val ...

  9. 为了解决mysqlbing翻译表字段问题而分析frm文件(持续更新)

    出处:kelvin19840813 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但 ...

  10. Weka使用常见问题

    1.中文乱码 办法:找到RunWeka.ini文件,将Cp1252替换成数据对应的字符集编码,比如utf-8,cp936(简体中文),cp950(繁体中文).