lazy loading: progressive vs on-demand

Question

This is a conceptual question. In my particular case, I am using slick.js to create an image carousel for a website. Since these are high resolution photographs, I want to speed up the page load time by allowing the photographs to be loaded asynchronously instead of on page load.

When looking through the documentation for this library, I saw the settings available for the 'lazyLoad' property with little information as to what those settings mean in practice.

Essentially my question is, what is the difference between progressive and on-demand in the context of lazy loading.

Reeno · Accepted Answer · 2015-12-22 09:10:03Z

90

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.

on-demand: 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.

Source: https://github.com/kenwheeler/slick/issues/35, especially jasonday's comment from 5. Apr

edited Dec 22, 2015 at 9:10

answered Sep 8, 2014 at 14:35

Reeno

5,71511 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

fearis Over a year ago

Be careful cause progressive is not supported in all Safari browser (tested on Slick 1.5.5, 1.5)

ifusion Over a year ago

This should be documented on the actual slick website. Thanks for the info @Reeno.

Roger Schaerer Over a year ago

@ifusion A good idea to include it to the actual slick website. I found out that it is included in the READMED.md but I couldn't locate the gh-pages repo for the actual slick website. Any idea where to find it?

ifusion Over a year ago

Not sure sorry @RogerSchaerer

Baras · Accepted Answer · 2020-10-01 12:55:24Z

14

It's worth mentioning that there is another value for the lazyLoad option in the source code, not documented though: 'anticipated'. It was introduced in release 1.7.1

lazyLoad accepts 'ondemand', 'progressive', or 'anticipated' for lazy load technique.

'ondemand' will load the image as soon as you slide to it.

'progressive' loads one image after the other when the page loads.

'anticipated' pre-loads the 1 next and 1 previous image.

answered Oct 1, 2020 at 12:55

Baras

1891 silver badge6 bronze badges

Collectives™ on Stack Overflow

lazy loading: progressive vs on-demand

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related