How to optimize a slider with 50 photos?

Question

JavaScript

There is a slider almost at the end of the page, it has 50 photos, a slider on the slick slider, Google gives 99 points. but writes that the potential savings in download time is 273 seconds. I want to load all the content of the slider when it enters the user's view. lazy load is enabled in the slick slider itself. What are the options to implement this?

Answer 1

You can use IntersectionObserver .

How it works?

На нужный dom-элемент навешивается наблюдатеть с колбеком, внутри которого можно делать всё, что угодно. В вашем случае при срабатывании element.isIntersecting это будет загрузка всех стилей/скриптов слайдера и его инициализация.

See an example: https://codepen.io/alnidok/pen/eYNeGMQ
Supported by almost all modern browsers:
https://caniuse.com/#feat=intersectionobserver

Answer 2

1. catch the scroll and initialize the slider after the block with it is visible to the user

if (window.innerHeight + document.documentElement.scrollTop === 
document.documentElement.offsetHeight) {
    sliderInit();
}

2. optimize and !crop pictures, because even in blocks with fixed and smaller width and height they will load their full resolution
3. intersection observer
4. look at tips in a similar thread