Лендинг представляет собой одностраничный сайт. У него вся информация расположена на одной странице в виде секций. Если одна либо несколько секций содержит большое количество изображений, то для увеличения скорости загрузки сайта целесообразно использовать ленивую загрузку изображений (lazy load). Эта техника заключается в том, что при загрузке страницы помеченные изображения не прогружаются, вместо них показывается заглушка. Когда же пользователь прокручивает страницу до картинки, то вместо заглушки с сервера загружается изображение. Таким приемом можно существенно сэкономить вес загружаемой страницы.
Подключаем скрипт ленивой загрузки:
|
1 |
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/4.1.5/lazysizes.min.js" async=""></script> |
Для этого необходимо картинки обернуть в div с классом img
|
1 |
<div class="img"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="img/miniimg/etap11/7-main.jpeg" alt="Этапы строительства" /></div> |
При этом путь к изображению прописывается в атрибуте data-src. А в src путь к белому пикселю, который будет загружен сразу. При прокрутке к изображению скрипт поменяет атрибут значение src на data-src в итоге загрузится необходимая картинка. Вот этот скрипт нужно добавить в конец страницы перед /body
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> function loadimg(){ var $images = $('.img'); $images.each(function(){ var $img = $(this), src = $img.attr('data-src'); $img .on('load',imgLoaded($img[0])) .attr('src',src); }); }; $(window).load(function(){ loadimg(); }; </script> |
Естественно, перед вызовом скрипта должен быть подключен jquery
*Перед тем как найти данное решение пришлось перерыть массу статей, но данное решение понравилось своей простотой и понятностью.