一个轻量级的图片延迟加载 JS 库,使用<a>标签替代<img>标签。

前几天刚提到不依赖于JQuery的懒加载LazyLoad,今天在看阮一峰老师的每周分享第 58 期时,发现了这么一个名叫gandul的图片延迟加载JS库。gandul非常轻量级,压缩之后不到2KB。

废话少说,上代码:

<a href="images/bmw_m1_hood.jpg" class="gandul">bmw_m1_hood</a>
<script src="https://cdn.jsdelivr.net/gh/alterebro/accessible-image-lazy-load/dist/gandul.min.js"></script>
<script>gandul();</script>

第2、3行在</body>标签之前引入即可。

请看第1行,这跟我们以往使用延迟加载代码不同。

以住使用的代码可能是这样:

<img class="lazyload" src="images/dot.gif" alt="bmw_m1_hood" data-src="images/bmw_m1_hood.jpg">

data-src为实际要加载的图片地址;src为占位图片地址,在实际图片未加载时,临时替代实际图片的位置。class视情况设置为lazyloadalt则是图片的名称。

通过对比,我们发现,gandul的使用非常简单,a标签的href就是图片的实际地址,不用额外设置一个占位图片。class设置成了gandula标签链接的锚文本则是bmw_m1_hood

<a href="images/bmw_m1_hood.jpg" class="gandul">bmw_m1_hood</a>

再让我们看看图片加载之后html代码是什么样子的。

<img alt="bmw_m1_hood" src="images/bmw_m1_hood.jpg" class="gandul gandul-active">

通过图片加载前后的对比,我们发现以下几个特征:

  1. a标签和img标签的class属性值都没变,都是gundul,但是img标签多了一个gandul-active,说明图片已加载。
  2. a标签href属性和img标签src属性的值都是images/bmw_m1_hood.jpg
  3. a标签的锚文本成了img标签的alt属性值。

至此,gandul的优势就已经显现出来。写的代码更简单,还会自动加上给图片加上alt属性,这对于图片的SEO是非常优化的。

再退一步,如果浏览器JavaScript被禁用,a标签依然生效,我们只要点击链接,就能看到这张图片。

更多用法,请访问原作者的GitHub项目地址https://github.com/alterebro/accessible-image-lazy-load

点击http://lab.fengtalk.com/gandul/,查看演示效果。