懒加载,又名延迟加载,是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懒加载演示。