CODEWITHSUNDEEP
wordpresslazy-loadingswiper.js
iuriiGav
iuriiGav

Reputation: 11

SwiperJS - show spinner between the images while loading

I am using SwiperJS for some galleries in my custom build Wordpress website. I am also using a plugin for lazy loading all my images, so the SwiperJS' own lazy load is disabled. However, now when the images are swiped and loading, there isn't any spinner to indicate that something is happening. Question is, how can I add this spinner with javascript myself.

Lets say now there is this rendered in the 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>

Slide, that is currently showing has the class class="swiper-slide-active" and the next one has class="swiper-slide-next"

When I swipe (or press the next arrow), the class class="swiper-slide-next" changes to class="swiper-slide-active" and its child, img tag receives the class class="lazyloading" and data-ll-status="loading"

After the image is loaded it changes to class="lazyloaded" data-ll-status="loaded"

Now, how can I track with javascript the moment, when the img tag inside the div with the class class="swiper-slide-active" receives the class class="lazyloading" or data-ll-status="loading", when that happens render inside <div class="swiper-wrapper"> </div> a spinner and when the class="lazyloading" changes to class="lazyloaded" remove the spinner?

I would greatly appreciate any help! Thank you!

Upvotes: 1

Views: 5837

Answers (1)

Gabriel Peralta
Gabriel Peralta

Reputation: 21

I'm not sure that i understood your problem right : You need to get a spinner when the image is loading ?

Check on https://swiperjs.com/swiper-api#lazy-loading for the "swiper-lazy-preloader".

It should look like this :

<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>

Upvotes: 2

Related Questions