图片懒加载(图片延迟加载)

warning: 这篇文章距离上次修改已过294天,其中的内容可能已经有所变动。

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

2020-01-02_205807.png2020-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 });
最后修改于:2020年01月06日 00:32

添加新评论

* 已开启反垃圾保护,《隐私政策》