使用lazysizes实现图片懒加载

图片资源是WEB项目中很重要的组成部分，也是交互设计中一个很重要的体现，往往一张图能胜过千言万语，所谓“一图胜百言”。然而大量的图片也会给服务器带来很大的压力，据统计：图片内容已经占到了互联网内容总量的62%，也就是说超过一半的流量和时间都用来下载图片。因此对图片加载的优化显得尤为重要。

图片的加载机制可以简单分为三类：图片即时加载、图片预加载和图片懒加载。本文主要研究图片懒加载，将要给大家安利一个非常轻量级并且对SEO友好的懒加载插件：lazysizes。

为什么是它？

lazysizes 是一个快速、高性能的异步加载插件，支持图片（包括响应式图片）、iframes 和脚本，并且没有任何依赖（我是不会说lazyloader依赖于jQuery的）。它能够检测到通过用户交互触发产生的任何可见的变化， 不需要CSS或JavaScript配置（这点就完爆lazyloader了好么）。它能在优化网站加载速度同时，并能让网站节省流量。并且它还不需要依赖其它JS库，直接引用 lazysizes.js 即可，轻量级，约5.8KB。更加难能可贵的是，它还支持适用响应式图像，可自动匹配图像大小，大家可预加载低质量图像来提高用户体验。

怎么用？

lazysizes 使用起来超级方便， 下面是教程：

Step 1: 下载 lazysizes.min.js 插件并将其引入到你的项目中：

    <script src=”lazysizes.min.js” async = ""></script>

Step 2: 将 添加要延迟加载的 <images> 或 <iframes> 即可。：

      <!— 默认方案 –>      
      <img >”image.jpg”  />

      <!— 响应式方案，可自动调用对应整图像尺寸 –>
      <img  >>”image2.jpg” >”image1.jpg 300w, image2.jpg 600w, image3.jpg 900w”  />

      <!– iframe 例子 –>
      <iframe frameborder=”0″  allowfullscreen=”” >”//www.youtube.com/embed/ZfV-aYdU4uE”></iframe>

到此，你已经成功把懒加载功能应用到了你的项目中，是不是很简单？当然，官网文档中还提供了丰富的接口，几乎涵盖了图片懒加载所涉及到的功能点，有兴趣的同学可以去官网看看接口文档，很容易理解。

 

该项目主页在这里：https://github.com/aFarkas/lazysizes

大家可以在以下地址看演示：http://afarkas.github.io/lazysizes/#examples

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者顾静授权发布。