Реализация Lazy Load на Jquery
Скорость загрузки страницы - это очень важный показатель для вашего сайта. Чем быстрее загружается страница на сайте, тем больше вероятность того, что пользователь зайдет на ваш сайт, а не покинет его, не дождавшись загрузки. Сегодня мы с вами поговорим о Lazy Load - ленивая подгрузка изображений на сайте.
Web-hosting rating: 8 out of 10 with 325 ratings

Видеоурок: Lazy Load на Jquery

 

Что такое Lazy Load

Когда вы создали свой веб-сайт вы начинаете уделять внимание скорости загрузки станицы. Если ваша страница загружается очень долго, пользователи закроют ваш сайт до загрузки. Это особенно актуально если на вашем сайте присутствует много изображений, которые прибавляют вес вашей странице.

И здесь нам на помощь приходит Jquery плагин Lazy Load, с помощью которого изображения на вашем сайте загружаются не сразу, а по мере того, как пользователь прокручивает страницу вниз.

 

 

Подобный эффект вы видите постоянно, когда пользуетесь социальными сетями. Представьте себе, сколько бы загружалась страница социальной сети пользователя, на стене которого 8000 постов, без Lazy Load.

Lazy Load стал неотъемлемой частью сайтов веб 2.0 не только потому что он облегчает вес страницы, но и еще потому что классно смотрится.

 

Реализация Lazy Load загрузки страницы

Для реализации 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. Впереди у нас много интересного материала для веб-программистов.





Читайте также


Что такое NodeJS и npm?

XAMPP - как установить и настроить на Mac (Mojave, Sierra)

Как самостоятельно изучить веб-программирование

Взломали Cкайп, что делать?

Что такое реферальный спам в Google Analytics

Постраничная ленивая загрузка (lazy load) постов

Как стать профессиональным веб-разработчиком

Методы setTimeout и setInterval в Javascript

Три полезных CSS свойства для работы с изображениями

Массивы в Javascript

Что такое TypeScript

CSS3 - Эффект вращения

Sublime Text 3 - удобный редактор кода для веб-разработчиков

Установка и настройка веб-сервера для сайта в Ubuntu

Полезные приложения для веб-разработчиков в Google Chrome

Модальное окно на Jquery

GIT команды: Быстрый старт для новичков

Что такое конструктор в объектно-ориентированном программировании

Что такое объектно-ориентированное программирование

Как отправить форму без перезагрузки страницы (AJAX)

Как быстро создать сайт и привлечь поисковый трафик

Bitbucket: Крутой облачный GIT репозиторий

Javascript: Классы в Javascript

Что такое веб-хостинг и как выбрать хостинг для сайта

SQL запросы: Основы администрирования MySQL

Команды Linux: оболочка BASH

Joomla CMS: Преимущества и недостатки

Качественный сайт: семь ключевых свойств



Все материалы с сайта wh-db.com и ru.wh-db.com защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.



Комментарии





Материал интересный. Смотреть видео не возможно. Спросите почему? 1. Рамер кадра для обучающего видео - 1280*720 или 1024*768 2. Если в кадре присутствует текстовый редактор - то размер шрифта не менее 16px. 3. Если б я купил Ваш инфопродукт -- обязательно потребовал возврата денег.( см. п. 1 и 2 )
Виктор ответить
Спасибо за ваши ведеоуроки! Смотрю их с октября месяца и многому научился. Когда появятся новые уроку?
Сергей Никонов [АДМИНИСТРАТОР] ответить
Спасибо за ваш отзыв. Скоро планируется дополнительная серия бесплатных видеоуроков. Вы можете зарегистрироваться в личном кабинете курса Профессия веб-программист и пройти бесплатно еще несколько уроков, а также курс HTML и CSS.
Илья Куприянов ответить
Здравствуйте, спасибо за урок. Только как уже было написано выше, шрифт очень мелкий У меня вопрос возник. У тега img нет атрибута SRC и на это ругается валидатор. Нужно ли её исправлять? и если нужно то как? Спасибо
Сергей Никонов [АДМИНИСТРАТОР] ответить
Если есть тэг img, у него обязательно должен быть атрибут src. В данный атрибут нужно указывать ссылку на изображение.

Оставить комментарий









Поиск хостинга



HDD (mb)
8000
Максимальная цена за месяц, (RUB)
700

Дополнительно







Новые статьи

















ВСЕ СТАТЬИ


Обзоры хостинга















Категории


24x7 Support Web Hosting
Angular JS Web Hosting
Apache Web Hosting
ASP.NET Web Hosting
CPanel Web Hosting
Cron Web Hosting
DirectAdmin Web Hosting
Django Web Hosting
EMail Web Hosting
FireBird Web Hosting
Free Domain Web Hosting
GIT Web Hosting
Jabber Web Hosting
Java Web Hosting
JavaScript Web Hosting
JBoss Web Hosting
JSP Web Hosting
Linux Web Hosting
MERCURIAL Web Hosting
MongoDB Web Hosting
MySQL Web Hosting
NGinx Web Hosting
NodeJS Web Hosting
Perl Web Hosting
PHP Web Hosting
PostgreSQL Web Hosting
Python Web Hosting
Ruby Web Hosting
Russian Web Hosting
Servlets Web Hosting
Spring Web Hosting
SQLite Web Hosting
SSH Web Hosting
SSL Web Hosting
Stream Web Hosting
SVN Web Hosting
TomCat Web Hosting
Unlimited HDD Space Web Hosting
Unlimited Sites Web Hosting
Unlimited Traffic Web Hosting
USA Web Hosting
VmWare Web Hosting
Windows Web Hosting