Slick: Lazyloaded called twice with 1 slide

[kobiak]

When lazy load images, and there's one slide with infinite: false. Lazyloaded callback is fired 2 times.

It works perfectly when there're 2 slides or more.

http://codepen.io/kobiak/pen/qaagpP

Steps to reproduce the problem

1. Just view console log.
   

What is the expected behaviour?

To fire lazyloaded only once

More Details

• All browsers
• Latest jQuery and latest Slick.js

[shermendev]

I am experiencing the same issue.

[shermendev]

This is what triggers the bug for me
responsive: [{ //any code }]

[morgant]

I am experiencing the 'lazyLoaded'/'lazyLoadError' events being triggered multiple times, as well.

[morgant]

Looking at https://github.com/kenwheeler/slick/blob/master/slick/slick.js#L1616, it will nearly always (or always?) lazy load the first slide twice.

[shermendev]

For me, double lazy loading happens with every slide, not just the first one. If I remove 'responsive' property from the options lazyload will fire correctly.

[panaak]

In my case only fires twice for _local_ images. That is for images relative to site domain. Images from external sources are loaded correctly.

Setting / unsetting responsive option had no effect.

[jeznacki]

It's becasue slick first create img element in JS
imageToLoad = document.createElement('img');

then is listening his onload event - (when fired image is loaded first time)
imageToLoad.onload = function() {

then it puts it in image src attribute in DOM (image load event two)
image.attr('src', imageSource)

You should not bother to much because after first onload event image should be cached by browser so second time is just displayed from cache.

However would be nice to have it fixed.