Swiper 的使用筆記

關於Swiper

Swiper 是一款開源免費、強大的移動端觸摸滑動插件，中文文檔豐富，不詳述。

使用過程中遇到的問題

當使用 DIV 背景替代 IMG 標籤時，無法像 IMG 標籤可通過 data-srcset 設置多張圖片適應不同顯示屏。

IMG 標籤 data-srcset 示例

<img
    class="swiper-lazy"
    data-src="blueberries@1x.jpg"
    data-srcset=
        "blueberries@1x.jpg 1x,
         blueberries@2x.jpg 2x,
         blueberries@3x.jpg 3x"／>

如何讓 DIV background 也可以設置 1X 圖片、2X 圖片 ？ 👇

解决方法

• 方法一 可以結合 lazysizes 的 bgset plugins 解決;

• 方法二 當需要懶加載並且達到滑動到某一張圖片才加載下一張圖片時，方法一不太適宜。 通過 swiper 的 onLazyImageLoad 回調函數解決：

  1. 為 DIV 添加額外的類名和 data-bg-at1x 、data-bg-at2x 屬性(用於放置 @1x / @2x 圖片 URL)；

  2. 在 onLazyImageLoad 回調里為該 DIV 設置 background-image：
     1. 使用 -webkit-image-set(/path/to/image@1x 1x, /path/to/image@2x 1x) 設置,不支持部分瀏覽器（e.g: firefox)；
     2. 通過 JS 判斷瀏覽器 devicePixelRetio 直接使用 url(/path/to/image) 設置對應的背景(兼容不支持 -webkit-image-set 的瀏覽器)；

實現效果

👉 源代碼