Что такое ленивая загрузка?
Ленивая загрузка означает загрузку элементов на веб-страницу на более позднем этапе, когда пользователь собирается увидеть или взаимодействовать с конкретным элементом.
Почему это полезно?
Предположим, у вас есть веб-сайт интернет-магазина, где вы показываете пользователям тысячи товаров. Когда страница загружена, вы показываете только от 10 до 20 продуктов в окнах просмотра и, следовательно, загружаете изображения для них, но тогда вы не захотите загружать изображения продуктов, которые находятся внизу, потому что
если мы загрузим эти изображения заранее и пользователь не прокручивает страницу вниз, чтобы увидеть эти изображения, тогда это будет пустой тратой ресурсов браузера и ненужным потреблением данных для загрузки этих ресурсов.
Как использовать API наблюдателя пересечения для этого?
Существуют и другие внешние библиотеки, которые поддерживают эту функцию, но мы также можем добиться этого с помощью Intersection Observer API, собственного веб-API.
Все изображения по умолчанию имеют тег dataSrc (вместо тега src), который неизвестен браузеру, и изображения не загружаются заранее.
Затем мы устанавливаем прослушиватель пересечения для каждого изображения на веб-странице, и как только это изображение пересекается с окном просмотра браузера, запускается функция обратного вызова. В функции обратного вызова мы устанавливаем атрибут src, копируя значение из тега dataSrc, и теперь, поскольку тег src известен браузеру, он загружает изображения. Наконец, наблюдатель удаляется с этого изображения.
Вот и все. Вы найдете полный исходный код по адресу https://github.com/SaurabhGarg1/Lazy-load-images
