Swiper + 图片懒加载

最近写网站有遇到图片懒加载的问题，在网上搜的大概有以下几种方法：

• 纯js，给图片加个class名（相当于标识），判断是否出现在当前滚屏的范围内
• lazysizes插件（在网上搜的是这个对seo更好）
• lazyload(js/jquery插件两种)
• ……

---

因为主要是Swiper插件里有很多图，所以滚屏加载基本没有什么意义。

其实Swiper（3.x）的API中有相关的方法，不过如果直接搜懒加载/延迟加载，没搜索结果。好了不废话了，搜lazyLoading后会出来相关的参数和函数。

代码如下：

<!-- Swiper -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img class="swiper-lazy" data-src="...">
      <!-- swiper-lazy-preloader 这个就是转圈的那个“进度” -->
      <div class="swiper-lazy-preloader"></div>
    </div>
    <div class="swiper-slide">
      <img class="swiper-lazy" data-src="...">
      <div class="swiper-lazy-preloader"></div>
    </div>
    <!-- ... 只写了两个示例，多的话用js拼接字符串就好 -->
</div>

// 初始化swiper
var swiper = new Swiper('.swiper-container', {
    nextButton: '...',
    prevButton: '...',
    slidesPerView : '...',
    spaceBetween : ...,
    /* 
     * 设置为true -> 开启图片延迟加载
     * <img>的src属性改为data-src，class增加一个'swiper-lazy'
     * 如果直接用div，设置background，对应的改为data-background即可
     */
    lazyLoading: true,
    lazyLoadingInPrevNext : true, 
    // 这个为true时，↓才有用
    lazyLoadingInPrevNextAmount: 4 // 设置在延迟加载图片时提前多少个slide
});