Swiper's "imagesReady" event not firing

Question

I'm using Swiper mobile touch slider (v. 4.0.5). I'm having a problem that I think is related to the slider initializing before images are loaded, which causes it not to function.

The only solution I've found is to call update() after a delay.

setTimeout(function() {
  mySwiper.update();
}, 500);

But I don't like the half-second delay. If the slider must be reinitialized after images are loaded, I would rather that it happen efficiently as soon as the images are ready.

Documentation lists a updateOnImagesReady parameter which, when set to true, should reinitialize the slider after all of its images are loaded. But it doesn't seem to help.

updateOnImagesReady
When enabled Swiper will be reinitialized after all inner images ( tags) are loaded.
Required preloadImages: true

Under "events", the documentation lists an imagesReady event. I thought I could use this event to call update().

imagesReady
Event will be fired right after all inner images are loaded.
updateOnImagesReady should be also enabled

In my code below, the init event seems to fire, but I can't get imagesReady to fire.
Why is the imagesReady event not firing?

var mySwiper = new Swiper('.swiper-container', {

  loop: true,
  slidesPerView: 1,
  grabCursor: true,
  effect: 'fade',
  preloadImages: true,
  updateOnImagesReady: true,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  on: {
    init: function() {
      console.log('initialized.'); // this works
    },
    imagesReady: function() {
      console.log('images ready.'); // this doesn't work
    }
  }

});

body {
  margin: 0;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.5/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">

  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
                     //dummyimage.com/450x200/F00/fff&text=450w 450w,
                     //dummyimage.com/600x200/F00/fff&text=600w 600w,
                     //dummyimage.com/900x200/F00/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/F00/fff&amp;text=default"
             alt="">
    </div>
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
                     //dummyimage.com/450x200/0F0/fff&text=450w 450w,
                     //dummyimage.com/600x200/0F0/fff&text=600w 600w,
                     //dummyimage.com/900x200/0F0/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/0F0/fff&amp;text=default"
             alt="">
    </div>
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
                     //dummyimage.com/450x200/00F/fff&text=450w 450w,
                     //dummyimage.com/600x200/00F/fff&text=600w 600w,
                     //dummyimage.com/900x200/00F/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/00F/fff&amp;text=default"
             alt="">
    </div>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>

---

Possibly related:
Swiper slider not working unless page is resized
Swiper slider space between not showing on load
iDangero Swiper only work when screen is resized
swiper doesn't work on page load

---

Edit:

The initialization problem seems to go away if I remove the effect:'fade' parameter. See slideChangeStart event does not fire when I swipe. But I want to use the "fade" effect. And I'd still like to know how to get the events to fire.

Answer 1

I was having an issue where the imagesReady event wasn't firing for me, but it seems like it was because I was loading all the images as background images instead of inline image tags.

Answer 2

This issue seems to be fixed in version 4.0.7.
I'm not exactly sure why, but it might be due to changes on line 5958.

var mySwiper = new Swiper('.swiper-container', {

  loop: true,
  slidesPerView: 1,
  grabCursor: true,
  effect: 'fade',
  preloadImages: true,
  updateOnImagesReady: true,

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  on: {
    init: function() {
      console.log('initialized.'); // this works
    },
    imagesReady: function() {
      console.log('images ready.'); // this works now, too!
    }
  }

});

body {
  margin: 0;
}

<link href="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>

<!-- Slider main container -->
<div class="swiper-container">

  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/F00/fff&text=360w 360w,
                     //dummyimage.com/450x200/F00/fff&text=450w 450w,
                     //dummyimage.com/600x200/F00/fff&text=600w 600w,
                     //dummyimage.com/900x200/F00/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/F00/fff&amp;text=default"
             alt="">
    </div>
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/0F0/fff&text=360w 360w,
                     //dummyimage.com/450x200/0F0/fff&text=450w 450w,
                     //dummyimage.com/600x200/0F0/fff&text=600w 600w,
                     //dummyimage.com/900x200/0F0/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/0F0/fff&amp;text=default"
             alt="">
    </div>
    <div class="swiper-slide">
        <img srcset="//dummyimage.com/360x200/00F/fff&text=360w 360w,
                     //dummyimage.com/450x200/00F/fff&text=450w 450w,
                     //dummyimage.com/600x200/00F/fff&text=600w 600w,
                     //dummyimage.com/900x200/00F/fff&text=900w 900w" 
             sizes="100vw"
             src="//dummyimage.com/360x200/00F/fff&amp;text=default"
             alt="">
    </div>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>