swiper轮播图、前端轮播、等待轮播图都加载完毕再执行轮播的方法

使用了swiper轮播图插件+jq

        var mySwiper = new Swiper('.swiper-container', {
            autoplay: {
                delay: 5000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            loop: true, // 循环模式选项
            effect: 'fade',
            lazy: {
                loadPrevNext: true,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        })
        // 暂停图片轮播
        mySwiper.autoplay.stop();
        // 监听轮播图加载情况,等轮播图都加载完毕再执行轮播
        let swiperImg = $('.swiperImg')
        let time = setInterval(() => {
            let val = swiperImg.map((i, v) => {
                if (v.complete) {
                    return true
                }
            })
            if (val.length === swiperImg.length) {
                clearInterval(time)
                console.log('轮播图都加载完了')
                // 继续轮播
                mySwiper.autoplay.start();
                // 跳到下一张轮播图，为了用户体验更好
                mySwiper.slideNext();
            }
        }, 1000);

js用法也一样，先获取轮播图的数量，再使用 imgObj.complete属性，complete 属性可返回浏览器是否已完成对图像的加载。如果已加载完毕图片数量等于轮播图总数量，就代表轮播图已经加载完毕了