Menu
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.
851
Better performance—lazy loading helps you reduce the amount of images required to load when the page is first loaded. This means the page sends less resource requests, uses less bytes when downloading files, and requires less network bandwidth per user.
Lazy loading is a pattern to load the data on demand. It is useful when you have large amount of records and you need to display those. It loads the data step by step when the user scrolls down or needs it.
Reduces initial load time – Lazy loading a webpage reduces page weight, allowing for a quicker page load time. Bandwidth conservation – Lazy loading conserves bandwidth by delivering content to users only if it's requested.
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
120
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
