高性能异步图片加载器的JS库：lazysizes

jopen 9年前

lazysizes 是一个快速、高性能的异步加载器。支持图片（包括响应式图片）、iframes 和脚本没有任何依赖。它能够检测到通过用户交互触发产生的任何可见的变化， 不需要CSS或JavaScript配置。

How to

  1. Download the lazysizes.min.js script and include lazysizes in your webpage.

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

  2. lazysizes does not need any JS configuration: Add the class "lazyload" to your images/iframes/widgets in conjunction with a data-src or data-srcset attribute:

    <!-- non-responsive: -->  <img src="low-quality-src.jpg" data-src="normal-quality-src.jpg" class="lazyload" />    <!-- responsive example with automatic sizes calculation: -->  <img      data-sizes="auto"      src="lqip-src.jpg"      data-srcset="lqip-src.jpg 100w,      image2.jpg 300w,      image3.jpg 600w,      image4.jpg 900w" class="lazyload" />

    项目主页：http://www.open-open.com/lib/view/home/1413714472278