ленивая загрузка плагин lazy load xt

Настройка плагина Lazy load XT. Добавление ленивой загрузки изображений на сайт.

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

По стандарту все изображения подгружаются сразу, что сильно нагружает процесс и тем самым увеличивает время загрузки.

Для реализации нашей задачи, мы будем использовать готовое решение – плагин Lazy load XT

Для работы плагина необходимо подключить jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 

Сам скрипт Lazy load XT необходимо добавлять вручную в заранее созданный файл. Поэтому я создал JavaScript файл, который назвал lazy.js и подключил его к своему проекту.

Во внутрь файла я добавил следующий код, который взял со страницы на GitHub – https://github.com/ressio/lazy-load-xt/

Здесь нужно выбрать версию, которую вы хотели бы добавить на свой проект: обычная версия или минифицированная версия.

При нажатии на ссылку появляется код, который нужно добавить в файл lazy.js.

Далее мы добавляем на свой проект изображения, у которых атрибут src необходимо заменить на атрибут data-src.

<img data-src="a.png" width="200" height="200">
<img data-src="dlya-google.jpg" width="200" height="200">
<img data-src="fotorama_io.jpg" width="200" height="200">
<img data-src="kak-ustanovit-open-server-1024x576.jpg" width="200" height="200">

Всё. Если вы все сделали правильно, плагин должен работать.

Если у вас что-то не получилось, вы можете написаться нам в группе Вконтакте, и мы вам обязательно поможем – https://vk.com/progtime

Теперь давайте посмотрим на работу нашего плагина.

На это скриншоте видно что у нас прогрузились два изображения, которые попали в зону видимости. И теперь если мы будем опускаться вниз по странице, то у нас начнут загружать и другие изображения.

Не только изображения!

Данный плагин поддерживает “ленивую загрузку” не только для изображений. Его можно использовать для всех тегов, которые именю атрибут src:
<audio><embed><frame><iframe><img><video><input type="image">.

На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

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

avatar
43 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
42 Авторы комментариев
JeffreymaxJeffreymaxMichaeldusMichaeldusJohnnieQuabs Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Vladimir
Гость
Vladimir

а как добавить атрибут rcs с помощью js?

JanleF
Гость

Viagra Levitra Et Cialis [url=http://cialibuy.com/#]Cialis[/url] Venta De La Propecia Cialis Provera Best Website

bemnite
Гость
bemnite

buying cialis online canada https://canadianpharmacystorm.com cialis sale uk

AlvinCox
Гость
AlvinCox

buy legal viagra http://tadmedz.com viagra pills for sale

CharlesGOP
Гость
CharlesGOP

can buy cheap viagra http://cialisxtl.com generic cialis mail order

Waltonplort
Гость
Waltonplort

buy cheap cialis line viagra without prescription cheap generic viagra canada

BarryNaW
Гость
BarryNaW

order viagra legally https://edpillsphrm.com cialis coupons

Jefferykap
Гость
Jefferykap

cialis cheapest price uk viagra without a doctor prescription discount code for cialis

Marvinerulk
Гость
Marvinerulk

levitra cheap canada http://tadal24ph.com – cialis 20 mg best price buy viagra dublin

Marvinerulk
Гость
Marvinerulk

order cialis to canada http://tadal24ph.com – generic cialis no doctor’s prescription cialis tadalafil buy online

Marvinerulk
Гость
Marvinerulk

cialis super active 20mg pills http://aralenph.com – buy alaren viagra coupon

JanleF
Гость

Clonidine Overnight [url=https://abuycialisb.com/#]Buy Cialis[/url] Achat Vrai Viagra Ligne safe place to buy cialis online Buy Now Legally Generic Macrobid Real Store

Marvinerulk
Гость
Marvinerulk

best discount cialis http://hydroxychloroquine24.com – plaquenil generic buy cheap cialis link online

Marvinerulk
Гость
Marvinerulk

order viagra pills http://hydroxychloroquine24.com – plaquenil generic how to order levitra

Marvinerulk
Гость
Marvinerulk

order cheap generic viagra http://zithazi.com – zithromax online how to buy cialis in australia

Marvinerulk
Гость
Marvinerulk

cheap viagra gel http://alexa24ph.com – herbal viagra cheap viagra uk sale

Marvinerulk
Гость
Marvinerulk

cheap viagra tesco http://kaletra24.com – Ritonavir cialis 20 mg tablets uk

Marvinerulk
Гость
Marvinerulk

safe buy viagra online http://aralenph.com – buy chloroquine online viagra buy now pay later

Marvinerulk
Гость
Marvinerulk

cheap viagra uk http://hydroxychloroquine24.com – hydroxychloroquine buy viagra kenya

AlfredAdvog
Гость
AlfredAdvog

viagra
viagra buy bangalore

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
cheap viagra bulk

AlfredAdvog
Гость
AlfredAdvog

generic viagra 100mg
order cialis and viagra

AlfredAdvog
Гость
AlfredAdvog

viagra side effects
viagra cheap to buy

AlfredAdvog
Гость
AlfredAdvog

buy viagra
purchase cheap cialis soft tabs

AlfredAdvog
Гость
AlfredAdvog

viagra online
cialis super active buy

AlfredAdvog
Гость
AlfredAdvog

buy sildenafil
cheap-cialis.net

AlfredAdvog
Гость
AlfredAdvog

buy viagra
discount cialis and viagra

AlfredAdvog
Гость
AlfredAdvog

viagra pills
buy viagra und cialis

AlfredAdvog
Гость
AlfredAdvog

generic viagra 100mg
real viagra for sale

DennisLof
Гость
DennisLof

generic cialis tadalafil here
cialis or viagra

DennisLof
Гость
DennisLof

5 mg cialis coupon printable buy here
generic cialis at walmart

DonaldTwill
Гость
DonaldTwill

viagra boner viagra help
generic viagra india 100mg

DonaldTwill
Гость
DonaldTwill

buy viagra generic viagra
viagra samples

JosephDiona
Гость
JosephDiona

cialis free trial canadian cialis
cialis generic availability

JosephDiona
Гость
JosephDiona

online cialis cost of cialis
cialis money order

Thomasreeld
Гость
Thomasreeld

what does viagra do: viagra pills viagra cheap in canada

Thomasreeld
Гость
Thomasreeld

female viagra: generic viagra coupon viagra buy in canada

JohnnieQuabs
Гость
JohnnieQuabs

meds online without doctor prescription pain meds without written prescription ed meds online onlinepharmacyero.com

JohnnieQuabs
Гость
JohnnieQuabs

prescription drugs without doctor approval buy prescription drugs online legally best price for generic viagra on the internet onlinepharmacyero.com

Michaeldus
Гость
Michaeldus

cialis canada buy cialis

Michaeldus
Гость
Michaeldus

cialis in canada buy cialis

Jeffreymax
Гость
Jeffreymax

cialis online pharmacy: cheap cialis

Jeffreymax
Гость
Jeffreymax

real cialis without a doctor’s prescription: cheap cialis