Когда вы создали свой веб-сайт вы начинаете уделять внимание скорости загрузки станицы. Если ваша страница загружается очень долго, пользователи закроют ваш сайт до загрузки. Это особенно актуально если на вашем сайте присутствует много изображений, которые прибавляют вес вашей странице.
И здесь нам на помощь приходит Jquery плагин Lazy Load, с помощью которого изображения на вашем сайте загружаются не сразу, а по мере того, как пользователь прокручивает страницу вниз.
Подобный эффект вы видите постоянно, когда пользуетесь социальными сетями. Представьте себе, сколько бы загружалась страница социальной сети пользователя, на стене которого 8000 постов, без Lazy Load.
Lazy Load стал неотъемлемой частью сайтов веб 2.0 не только потому что он облегчает вес страницы, но и еще потому что классно смотрится.
Для реализации Lazy Load на Jquery создайте такую структуру проекта:
Скачайте плагин jquery.lazyload.min.js и положите его в корень или создайте для нее отдельный каталог js и положите туда.
Затем создайте каталог img и поместите туда картинки, которые вы хотите загружать Lazy Load.
Создайте файл index.php и напишите следующий код:
В блок head мы помещаем библиотеку Jquery и плагин jquery Lazy Load. В моем примере, картинки называются 1.png, 2.png и так далее.
Для удобства и написания меньшего количества кода, я использовал цикл for и в цикле вывел изображения.
Пример вы можете скачать по этой ссылке. Далее у нас идет Javascript код работы плагина lazy load. documet.ready обозначает, что мы вызываем код только после того, как все DOM элементы загрузятся.
Это делается для того, чтобы не было ошибок выполнения кода. Затем мы применяем к изображениям с классом lazy эффект lazy load.
Настроить подгрузку изображений можно с разными эффектами. Я поставил стандартный fadeIn.
Вы можете поэкспериментировать и пробовать другие Jquery эффекты.
Поместите каталог с файлами на ваш веб-сервер и запустите проект в каталоге lazyload. Затем попробуйте прокрутить страницу вниз.
Вы можете видеть, как картинки грузятся не все сразу, а по мере скроллинга.
Как вы видите, реализовать Lazy Load или ленивую подгрузку изображений с помощью Jquery очень просто.
Скачать готовый пример вы можете по ссылке.
В следующих статьях, мы поговорим о том, как реализовать Lazy Load эффект для div элементов.
Подписывайтесь на наш канал в YouTube и группу VK. Впереди у нас много интересного материала для веб-программистов.
XAMPP - как установить и настроить на Mac (Mojave, Sierra)
Как самостоятельно изучить веб-программирование
Что такое реферальный спам в Google Analytics
Постраничная ленивая загрузка (lazy load) постов
Как стать профессиональным веб-разработчиком
Методы setTimeout и setInterval в Javascript
Три полезных CSS свойства для работы с изображениями
Sublime Text 3 - удобный редактор кода для веб-разработчиков
Установка и настройка веб-сервера для сайта в Ubuntu
Полезные приложения для веб-разработчиков в Google Chrome
GIT команды: Быстрый старт для новичков
Что такое конструктор в объектно-ориентированном программировании
Что такое объектно-ориентированное программирование
Как отправить форму без перезагрузки страницы (AJAX)
Как быстро создать сайт и привлечь поисковый трафик
Bitbucket: Крутой облачный GIT репозиторий
Javascript: Классы в Javascript
Что такое веб-хостинг и как выбрать хостинг для сайта
SQL запросы: Основы администрирования MySQL
Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.
