the reason for this it is that when first initialising the swiper with lazy the image is not yet loaded and after load the image is displayed in my case I display the image with transition so it show up smoothly after loaded…
var swiper = new Swiper(".swiper-container", {
…
on: {
…
lazyImageReady: function() {
$(".swiper-slide-active").css(‘opacity’,0);
setTimeout(function() {
$(".swiper-slide-active").css({transition: ‘opacity 1s ease-in-out’,‘opacity’:1});
}, 300);
},
…
the problem is when I click next or previous the current image is replaced with the next slide and the image is not yet loaded there so it shows empty background image with the loading indicator…
my question is:
is it possible to show the loading indicator over the current image until the next slide image is finally loaded and then after then change to the next slide ?
this way the smooth transitions between images or crossfade will works smoothly and not so jumpy…
this happen only when images not yet in DOM not loaded yet…
I have a bunch of images to display and I want the images to be loaded when requesting them since are a lot… this is why I use lazy loading…