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

【问题标题】：SwiperJS - show spinner between the images while loadingSwiperJS - 加载时在图像之间显示微调器
【发布时间】：2021-04-12 21:40:50
【问题描述】：

我在我的自定义构建 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" 时，何时会在 <div class="swiper-wrapper"> </div> 内渲染一个微调器以及何时class="lazyloading" 更改为 class="lazyloaded" 删除微调器？

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

【问题讨论】：

标签： wordpress lazy-loading swiperjs swiper.js

【解决方案1】：

我不确定我是否正确理解了您的问题：加载图像时需要获取微调器吗？

在https://swiperjs.com/swiper-api#lazy-loading 上查看“swiper-lazy-preloader”。

应该是这样的：

<div class="swiper">
    <div class="swiper-wrapper">
        <!-- Lazy image -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy" />
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

【讨论】：