Како функционише лењо учитавање?
Нормална ХТМЛ слика изгледа овако:
<img src="sample.jpg" width="100%"/>
Додаци за лење учитавање преписују код овако:
<img data-src="sample.jpg" width="100%"/>
Као што сте приметили,срц
атрибут је промењен удата-срц
.
Јер немасрц
, претраживач првобитно не учитава ову слику. Касније, мали ЈаваСцрипт код проверава да ли се слика налази у оквиру за приказ (кориснички оквир за приказ), и да ли је унутра,дата-срц
враћа се на тосрц
који претраживач покреће преузимање и приказ слике.
Шта је нативно лењо учитавање?
Цхроме долази са „матичним лењим учитавањем“. О томе можете прочитати овде.
Природно лење учитавање има предност у томе што нема потребе за ЈаваСцрипт-ом и генерално је много брже пошто претраживач то ради „природно“.
Код изгледа овако:
<img src="sample.jpg" loading="lazy" width="100%"/>
Шта су летеће слике?
Флиинг Имагес је додатак за лење учитавање високих перформанси. Користи „природно“ лење учитавање претраживача ако је доступно, у супротном користите обичан ЈаваСцрипт за лење учитавање.
Летеће слике такође могу да учитавају слике пре него што се слике уопште појаве у прозору за приказ.
Да ли се плашите лењег учитавања јер то штети корисничком искуству?
По чему се летеће слике разликују од других додатака за лење учитавање?
- Користи уграђено лењо учитавање - користите уграђено лењо учитавање ако је доступно (тренутно је подржано само у Цхроме-у), у супротном користите ЈаваСцрипт за лење учитавање слика.
- Учитајте слике пре уласка у прозор за приказ - док други додаци учитавају слике када су "унутар" прозора за приказ, летеће слике их учитавају када се спремају да уђу у оквир за приказ.
- Тини ЈаваСцрипт - само 0,5 КБ, компресовано, смањено.
- Ако желите, можете користити само изворни – желите да подржавате само Цхроме? Можете да пређете на „само изворни“, који не убацује ЈаваСцрипт.
- Преписује сав ХТМЛ код - никада не пропустите слику због лењог учитавања (чак и ако је додају додаци галерије).
- Прозирно пунило - сићушна провидна база64 је додата свим сликама. Нема више треперења приликом учитавања слика.
- Изузми кључне речи - Скоро сви додаци за лење учитавање пружају функцију искључивања, међутим летеће слике такође могу искључити слике из родитељског чвора слике. Корисно ако ваша слика нема назив класе.
- Подржава претраживаче са онемогућеним ИЕ и ЈаваСцрипт-ом - све слике се тренутно учитавају ако је Интернет Екплорер или чак и ако је ЈаваСцрипт потпуно онемогућен (користећи
носцрипт
ознака).