Динамическая загрузка изображений во время прокрутки на jQuery

28/04/2015  веб-разработка, скрипты, html, image, jQuery, верстка

Простой скрипт LoadScroll для динамической загрузки изображений во время прокрутки. Предназначен для работы с изображениями тяжелых веб-сайтов, чтобы сохранить пропускную способность и уменьшить время загрузки. Поддерживается Google Chrome, Safari (Desktop & Mobile), Internet Explorer (8, 9, 10+), Firefox.

jQuery

Подключаем библиотеку jQuery (при необходимости), скрипт и функцию расширения.


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/js/loadScroll.js"></script>
<script> $(window).load(function() { $('img').loadScroll(); }); </script>

HTML


<!-- видимые изображения -->
<img src="/images/01.jpg" alt=""> <img src="/images/02.jpg" alt=""> <img src="/images/03.jpg" alt="">
...
<!-- подгружаемые изображения -->
<img data-src="/images/15.jpg" alt=""> <img data-src="/images/16.jpg" alt=""> <img data-src="/images/17.jpg" alt="">
...

Пример

Исходник — скачать архив

Михаил Апсолямов
Михаил Апсолямов Создаю сайты. Оказываю услуги seo-продвижения. Провожу аудиты сайтов. Пишу статьи на заказ. Услуги и цены.

 

наверх