Lazyload na srcset ne radi

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"
				 >

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.

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