Pokušavam koristiti lazy sizes skriptu na srcset, ali nikako da mi proradi.
Kod izgleda ovako:
<img
data-srcset="<?php echo JUri::base().$item->imageSrc; ?> 1024w,
<?php echo JUri::base().preg_replace('/_1024/', '_720', $item->imageSrc); ?> 720w,
<?php echo JUri::base().preg_replace('/_1024/', '_520', $item->imageSrc); ?> 520w,
<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?> 320w"
srcset="<?php echo JUri::base().$item->imageSrc; ?> 1024w,
<?php echo JUri::base().preg_replace('/_1024/', '_720', $item->imageSrc); ?> 720w,
<?php echo JUri::base().preg_replace('/_1024/', '_520', $item->imageSrc); ?> 520w,
<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?> 320w"
sizes="(max-width: 575.98px) 320px,
(max-width: 767.98px) 520px,
(max-width: 991.98px) 520px,
320px"
data-src="<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?>"
src="<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?>"
class="img-fluid lazyload"
alt="<?php echo htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8'); ?>"
width="1024" height="577"
>
igor
listopad 2021 08:42 25
2
Ovaj primjer koji si stavio ne može raditi zato što ti u startu definiraš i srcset
i src
atribute. Browser čim to vidi će učitati sliku bez obzira što je ti pokušavaš odgoditi učitatavanje pomoću JavaScripta. Stvar je u tome da izbrišeš src
, srcset
atribute i onda sizes
promijenis u data-sizes
. Na taj način će lazysizes znati što i kada učitati. Ovo bi trebalo biti ispravno uz pretpostavku da nemaš JS greški u konzoli:
<img
data-srcset="<?php echo JUri::base().$item->imageSrc; ?> 1024w,
<?php echo JUri::base().preg_replace('/_1024/', '_720', $item->imageSrc); ?> 720w,
<?php echo JUri::base().preg_replace('/_1024/', '_520', $item->imageSrc); ?> 520w,
<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?> 320w"
data-sizes="(max-width: 575.98px) 320px,
(max-width: 767.98px) 520px,
(max-width: 991.98px) 520px,
320px"
data-src="<?php echo JUri::base().preg_replace('/_1024/', '_320', $item->imageSrc); ?>"
class="img-fluid lazyload"
alt="<?php echo htmlspecialchars($item->title, ENT_QUOTES, 'UTF-8'); ?>"
width="1024" height="577"
>
Ispravljeno. Vidim da neki postavljaju oba atributa i srcset i data-srcset.
E sada kada provjeravam je li sve ispravno radi ne vidim da lazysizes uopće inicira učitavanje fotografija.
Vidim da u image class piše “lazyloaded”, ali u network tabu ne vidim inicijatora.
Live primjer je na dev.livno-online.com .
Evo nakon nove provjere sve ispravno radi. Hvala na pomoći.
Kada u HTML checkeru ispitujem stranice dobivam sljedeću grešku:
Error : Element img
is missing required attribute src
Kako je ispraviti. S obzirom da radi lazysizes skripte moram src preimenovati u data-src.
Probaj da udjes i da izadjes.
igor
listopad 2021 20:46 27
7
Možeš za src staviti
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
što je 1px x 1px transparentna slika, čisto da poništi grešku a neće utjecati na prikaz ili brzinu stranice