The swiper carousel map, the front-end carousel, and the method of waiting for the carousel map to be loaded before executing the carousel

Use the swiper carousel plugin +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);

The usage of js is the same, first get the number of carousels, and then use the imgObj.complete property, the complete property can return whether the browser has finished loading the image. If the number of loaded pictures is equal to the total number of carousels, it means that the carousel has been loaded