本文最后更新于2021年11月9日，已超过890天没有更新，若内容或图片失效，请留言反馈。

懒加载，又名延迟加载，是lazyload的英文翻译。

在网络上，只要有图片的地方，都可以用到懒加载。它通过在网页中延迟加载图片，可以优化网页的性能。

值得一提的是，图片延迟加载的灵感来自于Matt Mlinac的 YUI ImageLoader 技术。

在本文中，我们使用tuupola/lazyload来满足我们的要求。

在</body>标签之前引入以下JS代码

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.0.0/dist/lazyload.min.js"></script>
<script type="text/javascript">
  var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazyload"
  });
</script>

除此之外，我们还需要做如下操作。以下面的代码为例。

<img class="lazyload" src="images/dot.gif" alt="loading" data-src="images/bmw_m1_hood.jpg">
  1. 给img标签加上1个名为lazyload的类；
  2. 图片的src使用1个占位图片的地址；
  3. data-src为要加载的图片的实际地址；

具体的效果，请浏览LazyLoad懒加载演示。

标签: lazyload, 懒加载, 延迟加载

已有 2 条评论

  1. 奶爸de笔记 奶爸de笔记

    我以前也用过延迟加载，现在图片都是走CDN，所以无所谓了

    1. fengtalk fengtalk

      图片不多的时候，不用延迟加载倒也无所谓。有些业务场景下，图片较多，又没上CDN，只能采用懒加载的方式。

评论已关闭