swiper图片懒加载（多行多列）

首先看文档：lazyLoading_swiper3参数选项

问题一：多行多列的swiper发现只有第一行会出现懒加载，第二行的swiper一直不加载

解决方案：增加属性watchSlidesVisibility:true,

问题二：要做到懒加载正式图片之前先显示一张默认的背景图

解决方案：正式图片放在data-src中，默认背景图放在src中

<img class="swiper-lazy" data-src="images/goods.jpg" alt=" " src="images/default_img.png">

关键代码如下：

<div class="swiper-slide">
                        <div class="item3-type2 relative">
                            <div class="item-con">
                                <div class="img-box">
                                    <img class="swiper-lazy" data-src="images/goods.jpg" alt=" " src="images/default_img.png">
                                </div>
                                <p class="title">这是标题这是标题这是标题这是标题这是标题这是标题这是标题这是标题</p>
                                <div class="right">
                                    <div class="price-type1-group">
                                        <img src="images/price-type1.png"/>
                                        <span class="price1">￥122</span>
                                    </div>
                                    <div class="price-btn">
                                        <span class="desc">一口价</span>
                                        <span class="unit">¥</span>
                                        <span class="amount">168</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

 

var swiper4 = new Swiper('.swiper-type1', {
        slidesPerView: 2,
        slidesPerColumn: 2,
        spaceBetween: 0,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        lazyLoading : true,
        watchSlidesVisibility:true,
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        // slidesPerColumnFill: 'column', //'row'行
        speed: 500, //滚动速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true,
        autoplay: 5000,
        autoplayDisableOnInteraction : false,
        // slidesPerView : 'auto' // 开启自定义slide宽度，配合css样式设置即可
    });