js中实现延迟加载的方式

延迟加载，顾名思义即在长网页中延迟加载图像，当鼠标没有浏览到可视范围内，视口外的图像不会加载。其优点是减少服务器负荷，同时减小了浏览器的压力。

方法一：直接将script节点放置在</body>前后，这样js脚本就会在页面显示出来之后再加载。

方法二：使用script标签的defer和async属性，defer属性为延迟加载，是在页面渲染完成之后再进行加载的，而async属性 则是和文档并行加载，这两种解决方案都不完美，原因在于不是所有浏览器都支持。

<script src="file.js" defer> </script>
<script src="file.js" async> </script>

方法三：通过监听window.onload事件，动态添加script节点

<script type="text/javascript">  
   function downloadJSAtOnload() {  
       varelement = document.createElement("script");  
       element.src = "defer.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>  

方法四：通过ajax下载js脚本，动态添加script节点，但是ajax有一个缺点，就是无法引用使用CDN方式提供的js文件

方法五:使用setTimeout延迟加载

<script type="text/javascript">
  function login(){
    $.post("/lord/login",{name:username,pwd:password},function(){
      alert("Hello World!");
   })

 }
  $(function(){
    setTimeout("login()" ,1000);  ``//延迟1秒`
  })
</script>`