Lazy load jquery: jQuery Lazy — Delayed Content, Image and Background Lazy Loader

alexxlab

Реализация Lazy Load на Jquery

Видеоурок: 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 защищены авторским правом. Копирование, публикация, продажа и распространение материала строго запрещены.

Please enable JavaScript to view the comments powered by Disqus.

Ленивая (lazy load) загрузка изображений с Progressively

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(4 голосов)

Каждый современный сайт должен быстро загружаться. Существует множество методов и плагинов для ускорения загрузки страниц, поэтому вы можете не знать, что использовать сначала.

Скрипт Progressively является отличным инструментом для увеличения скорости страницы. Он является скриптом для отложенной загрузки изображений (lazy load), который загружает изображения постепенно в процессе прокручивания страницы пользователем.

Это бесплатный проект с открытым исходным кодом, поэтому вы можете скачать его и использовать на любом веб-сайте. Кроме того, он работает на 100% vanilla JS, поэтому у него нет зависимостей, которые могут утяжелить ваш сайт.

Вы можете посмотреть примеры его использования на домашней странице Progressively.

Он немного отличается от других скриптов отложенной загрузки (lazy load), поскольку сохраняет фиксированные размеры изображений для всей страницы. Это предотвращает очень раздражающий скачок страницы, который вы видите, когда изображения быстро загружаются в область просмотра и увеличивают высоту содержимого. Изображения-placeholder’ы на самом деле выглядят как изображения, которые вы загружаете. Потрясающе!

Эта аккуратная техника дает посетителям возможность просмотреть, как выглядят изображения, прежде чем они загрузятся. Все это работает на JavaScript, который проверяет местоположение пользователя на странице и загружает изображения по мере их появления.

Progressively имеет довольно обширный API, так что это отличный выбор для веб-разработчиков. Его внедрение на сайт не покажется вам сложным, если вы обладаете базовыми знаниями в разработке frontend.

Но вы можете узнать больше на главной странице инструмента на GitHub где размещена документация по API, представлены инструкции по внедрению, а также присутствую примеры кода, которые вы можете использовать в ваших проектах.

Если вам нужен надежный скрипт для ленивой загрузки изображений без неприятных зависимостей, используйте Progressively. Он абсолютно бесплатный и имеет множество настроек для разработчиков.

Загляните на страницу инструмента на GitHub, чтобы узнать больше и загрузить Progressively.

Демо

Оригинал статьи: Lazy-load Images Progressively with “Progressively”

Перевод: Земсков Матвей

Другие материалы в этой категории: « Шпаргалка по переходу с jQuery на vanilla JavaScript Overhang. js — jQuery-плагин для показа выпадающих уведомлений »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

  • Шаблон документа HTML5 (zip, 35.41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3. 11 Кб)

Полезное