image LAZYLOAD function

[Godin5]

have you planned an Update with image LAZYLOAD function ?

[Tidal-Wave]

I've considered it, but that would be a decent size change and has some draw backs. We first want to re-architecture the slider to have a plugin api and build something like that as a plugin that can be included separately. When doing lazy load most implementations depend on the img not having a source and having a data attribute that points to the image, which means you then have to consider all of the other factors with lazy load like you normally would for scrolling implementations (no js, older browser support, responsive image support, retina image support, etc.)

We will definitely keep it on the table, but I suspect that won't be seen until a major point update.

[Godin5]

Thanks for your answer. I really like your slider very much. Very good work! Have a nice day

[jmp909]

it would be good if we could do our own checks in onSlideBefore and prevent the slide from happening under certain conditions, and then when we've satisfied the condition ourself we can then call gotoNextSlide() etc

currently I don't want to move to the next slide until it contents our loaded, so i was going to throw up a preloader over the current slide, preload the next slide's contents and then call gotoNextSlide() gotoPrevSlide() etc.. even better would be if i could just resume() and it would pick up where it left off.

thanks j

[sonicpunk]

I would recommend just using LazySizes for lazy loading: https://github.com/aFarkas/lazysizes

[sonnb]

I am having same concern. It is not easy to extend bxslider to support that, unless modify the source directly which will make conflict if several codes include other version of bxslider.

In other word, we need a way to extend the private function loadElements and other functions like goToNextSlide

[fdverwoerd]

I had to do something similar but did not wanted to change library; What I did was use loading='lazy' but not on first image in slider. Because then the 'height' is properly calculated. It's best I could do imo.

<img {% unless forloop.first %}loading="lazy"{% endunless %} src="{{ slide_item.image.src | img_url: 1200, height: 640, mode: "crop", quality: 70 }}" alt="{{ slide_item.image.meta.alt }}" style="object-fit: cover; position: absolute; inset: 0; z-index: 1;">