gandul - 又一个图片延迟加载JS库

一个轻量级的图片延迟加载 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视情况设置为lazyload，alt则是图片的名称。

通过对比，我们发现，gandul的使用非常简单，a标签的href就是图片的实际地址，不用额外设置一个占位图片。class设置成了gandul，a标签链接的锚文本则是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/，查看演示效果。