Отложенная загрузка изображений
Предположим, у Вас на сайте содержится много изображений больших размеров, многие из которых не видны при первоначальной загрузке странички, т.к. находятся за пределами экрана. Если пользователь попал на такую страничку, то ее полная загрузка может потребовать много времени.
Мы предлагаем Вам воспользоваться скриптом отложенной загрузки или как его еще называют "ленивой загрузки" (Lazy Load). Суть данного скрипта состоит в том, что изначально на страничке будут загружены только видимые изображения. Остальные изображения, находящиеся вне поля зрения пользователя будут подгружаться по мере прокрутки странички вниз. Таким образом, можно существенно сократить время загрузки страничек и уменьшить трафик.
Для реализации скрипта отложенной загрузки на своем сайте, Вам понадобится подключить стандартную библиотеку jQuery. Делается это следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Дополнительно Вам понадобится еще одна библиотека jQuery под названием Lazy Load, которую Вы можете скачать с нашего сайта по ссылке lazyload.min.js. Данную библиотеку Вы тоже должны подключить на своем сайте следующим образом:
<script type="text/javascript" src="jquery.lazyload.min.js"></script>После того, как мы подгрузили необходимые библиотеки, мы должны указать, загрузка каких изображений будет происходить постепенно по мере надобности:
<script type="text/javascript">
$("img.lazy").lazyload({threshold: -200, effect: "fadeIn"});
</script>В данном случае отложенная загрузка будет касаться изображений с классом lazy и к данным изображения будет применен эффект плавного появления. Еще очень полезным параметром данной функции является threshold, при помощи которого можно указать, на каком расстоянии от нижнего края браузера до изображения стоит начинать загрузку изображения.
Теперь все изображения, которых будет касаться наша ленивая загрузка, стоит описывать следующим образом:
<img class="lazy" src="image/pixel.gif" data-original="image/pixlr.png"
width="700" height="500" alt="">
<img class="lazy" src="image/pixel.gif" data-original="image/cooltext_2.png"
width="700" height="500" alt="">Где pixel.gif - картинка величиной в 1 пиксель, которая потом будет заменена на изображение указанное в data-original.
Далее Вы можете наблюдать пример постепенной загрузки изображений. Мы специально выстави параметру threshold значение -200 для того, чтобы Вы наглядно могли наблюдать, что загрузка изображения начнется только после того, как первоначальное изображение (pixel.gif) покажется более чем на 200 пикселей.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посему применителю предлагаемой здесь технологии придётся выбирать между ускорением загрузки страницы и незначительным плюсом к продвижению.