When using jQuery’s carousel library slick.js as-is, I faced a problem where all images wrapped in ul, li tags would be displayed until the slick.js file loading and .slick() method execution completed, preventing the carousel layout from appearing.

To solve this, specify the image URL with src only for the first image.

For the second image onwards, specify the image url in the data-lazy attribute.

Then set the lazyLoad option in the .slick() method and you’re good to go.

$('#js-banner-area').slick({
  lazyLoad: 'progressive'
});

Lazy loading samples are available at slick - the last carousel you’ll ever need.

By the way, the lazyLoad option has two settings: ondemand and progressive. There was a detailed explanation of the behavioral differences in a Stack Overflow post, so I’ll quote it:

ondemand: Loads the visible image as soon as the page is displayed and the other ones only when they're displayed. ("[...] loads slides on demand. When a slide becomes visible (or on the before slide callback) the load is fired.") Should be used if the other images of the carousel are displayed very rarely.

progressive: Loads the visible image as soon as the page is displayed and the other ones after everything else is loaded in the background (“loads the visible slides on init, and then progressively loads the rest of the slides on window.load().”). Should be used if the other images will be used most (or all) of the times the page is displayed.

• Source: javascript - lazy loading: progressive vs on-demand - Stack Overflow

The default is ondemand where load processing occurs when images are displayed, but personally I prefer using the progressive option which loads images in the background.

For lazyLoad option settings, it seems good to decide whether to use ondemand or progressive based on how frequently the second and subsequent images in the carousel are displayed.

Reference Information

• kenwheeler/slick
• Add lazy loading · Issue #35 · kenwheeler/slick

That’s all from the Gemba.