首页 > 代码库 > 【随笔】js加载
【随笔】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="http://www.mamicode.com/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="http://www.mamicode.com/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=http://www.mamicode.com/‘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加载