图片懒加载（图片延迟加载）

今天，处理站点地图的时候，发现有个PageSpeed Insights工具，可以测试网站打开速度并提供改进建议。

2020-01-02_205807.png

我这个网站的问题主要是图片太大，加载慢。

我觉得最可行的就是使用延迟加载（懒加载）的方式载入图片。

这次，我们使用基于jQuery的lazyload来实现懒加载。

注意：微信内X5内核加载失败！
2020-01-05 更新，代码问题修正，微信上生效需清理内置x5内核缓存

首先，引入相关js文件

<!--由于lazyload依赖于jquery所以要先加载-->
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<!--lazyload的js，由于我用的是bootstrap，所以就用他家的cdn了-->
<script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
<!--使用 '//' 可以自动选择使用http还是https加载-->

添加触发函数

<script type="text/javascript">
      $(function() {
          $("img").lazyload({ 
          placeholder : "/loading.gif",
                 effect: "fadeIn"
           });
      });
</script>

替换img标签

<img class="lazyload" src="/loading.gif" data-original="图片实际Url">

其他设置

//图片距离屏幕200px时提前加载
jQuery("img").lazyload({ threshold : 200 });