SwiperJS - 在加载时在图像之间显示微调器

时间:2021-04-12 21:40:50

标签: wordpress lazy-loading swiperjs swiper.js

我在自定义构建的 Wordpress 网站中将 SwiperJS 用于一些画廊。我还使用了一个插件来延迟加载我的所有图像,因此禁用了 SwiperJS 自己的延迟加载。但是,现在当图像被滑动和加载时,没有任何微调器表明正在发生某些事情。问题是,我如何自己用 javascript 添加这个微调器。

假设现在在 DOM 中呈现了这个:

       <div class="swiper-container">
            <div class="swiper-wrapper">
                                           
                        <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" role="group" aria-label="3 / 7" style="width: 624px;">
                            <img src="path/to/src.jog" alt="" class="lazyloaded" data-ll-status="loaded">
                        </div>

                        <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="2" role="group" aria-label="4 / 7" style="width: 624px;">
                            <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="" data-lazy-src="//localhost:3000/wp-content/uploads/2021/04/K0924-900x1200.jpg">
                        </div>

             </div>
      </div>

幻灯片,当前显示的类别为 class="swiper-slide-active",下一张为 class="swiper-slide-next"

当我滑动(或按下下一个箭头)时,类 class="swiper-slide-next" 更改为 class="swiper-slide-active" 及其子类,img 标签接收类 class="lazyloading"data-ll-status="loading"

图片加载后变为class="lazyloaded" data-ll-status="loaded"

现在,我如何使用 javascript 进行跟踪,当类 class="swiper-slide-active" 的 div 内的 img 标签接收类 class="lazyloading"data-ll-status="loading" 时,当发生这种情况时,在 { {1}} 一个微调器,当 <div class="swiper-wrapper"> </div> 变为 class="lazyloading" 时移除微调器?

我将不胜感激任何帮助!谢谢!

0 个答案:

没有答案
相关问题