高性能异步图片加载器的JS库:lazysizes
jopen
10年前
lazysizes 是一个快速、高性能的异步加载器。支持图片(包括响应式图片)、iframes 和脚本没有任何依赖。它能够检测到通过用户交互触发产生的任何可见的变化, 不需要CSS或JavaScript配置。
How to
-
Download the lazysizes.min.js script and include lazysizes in your webpage.
<script src="lazysizes.min.js" async=""></script>
-
lazysizes does not need any JS configuration: Add the
class
"lazyload"
to your images/iframes/widgets in conjunction with adata-src
ordata-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" />