高性能異步圖片加載器的JS庫：lazysizes

jopen 10年前發布 | 39K 次閱讀 lazysizes JavaScript開發工具包

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.baiduhome.net/lib/view/home/1413714472278

 本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！