使用jquery lazyload插件优化前端网站

开启新网站首页时，往往需要加载大量的资源。导致大量用网络请求。加大服务器压力及整页加载完成时间。这是我们就可以利用lazyload来优化它。只优先加载出现在屏幕上的资源。其他资源待用户翻动下拉条到对应的位置时这样就能有效减少初始下载数据量。加快用户可看页面。及缓解web端的资源竞争压力。废话不多说直接撸代码。

<!-->添加必要的js文件<-->
  <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
  <script src="https://cdn.bootcss.com/jquery_lazyload/1.9.1/jquery.lazyload.min.js"></script>
 <!-->延时加载代码<-->
 <script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
  </script>

<!--> 延时加载列表<-->
<li><img class="lazy" data-original="https://xxx.xxx.jpg" /></li>

演示站
http://www.jq22.com/yanshi390