Slick: Built in loading indicator for lazy load

[Demnogonis]

I use the slick slider for an image slideshow on mobile devices.
The images in the slideshow can have quite a large file size so I'm using lazy load.
If the user has a slow connection the lazy load takes a considerable amount of time so the user could be confused that the webapp could hang. Unfortunately there is no loading indicator displayed when using lazy load. I'd like to see this feature.

It would also be nice to be able to change the loading indicator through the configuration object
Example:

$('.lazy').slick({
  lazyLoad: 'ondemand',
  lazyIndicator: 'custom-loading.gif',
  slidesToShow: 3,
  slidesToScroll: 1
});

[guilhermedecampo]

+1

I'm really interested in this feature, also @Demnogonis.
Do you have any workaround for now?

[Demnogonis]

@guilhermedecampo
After some fiddeling I got something that kinda works.
http://pastebin.com/TaKa9gBL

But I would not use it like that in a productive environment.

[guilhermedecampo]

@Demnogonis didn't like it also.

What I did was just set these CSS classes with my loader gif:

.slick-slide, .slick-loading {
  background:#eee url('images/loader.gif') no-repeat center;
}

Hope it helps :stuck_out_tongue_closed_eyes:

[Demnogonis]

@guilhermedecampo Nice solution!
I tried the same approach yesterday but only on the image with .slick-loading.
For some reason I didn't think of applying it to the slide directly :sweat_smile: