Swiper + 图片懒加载

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

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

---

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

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

代码如下：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img class="swiper-lazy" data-src="...">
      
      <div class="swiper-lazy-preloader">div>
    div>
    <div class="swiper-slide">
      <img class="swiper-lazy" data-src="...">
      <div class="swiper-lazy-preloader">div>
    div>
    
div>

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