js延迟加载

1. defer 属性

   <script src="a.js" defer></script>
   

浏览器会并行下载 a.js和其它有defer属性的script，而不会阻塞页面后续处理。defer属性在IE 4.0中就实现了，超过10多年了！Firefox从 3.5 开始支持defer属性 。
注：所有的defer脚本保证是按顺序依次执行的。

2. async 属性

   <script src="a.js" async></script> 
   

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。
Firefox3.6、Opera10.5、IE9和最新的Chrome 和 Safari 都支持 async属性。可以同时使用 async和defer，这样IE4之后的所有IE都支持异步加载。

3. 动态创建DOM方式
   <script type="text/javascript">
   function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "a.js";
   document.body.appendChild(element);
   }
   if (window.addEventListener)
   window.addEventListener("load",downloadJSAtOnload, false);
   else if (window.attachEvent)
   window.attachEvent("onload",downloadJSAtOnload);
   else window.onload =downloadJSAtOnload;
   </script>
4. 用jQuery的getScript()方法
   $.getScript("outer.js",function(){//回调函数，成功获取文件后执行的函数
   console.log("脚本加载完成")
   });
5. 图片懒加载
   function aftLoadImg(obj,url){
   var oImg = new Image();//缓冲
   oImg.onload = function(){
   obj.src = oImg.src;//图片加载完成后赋值给真正的图片元素
   }
   oImg.src = url;
   }