Kā darbojas slinka iekraušana?
Parasts HTML attēls izskatās šādi:
<img src="sample.jpg" width="100%"/>Slinkas ielādes spraudņi pārraksta kodu šādi:
<img data-src="sample.jpg" width="100%"/>Kā jūs pamanījāt,srcatribūts ir mainīts uzdata-src.
Jo nēsrc, pārlūkprogramma sākotnēji neielādē šo attēlu. Vēlāk neliels JavaScript kods pārbauda, vai attēls atrodas skata logā (lietotāja skata logā) un vai tas atrodas iekšpusē,data-srcatgriežas pie tāsrckura pārlūkprogramma aktivizē attēla lejupielādi un parādīšanu.
Kas ir vietējā slinkā ielāde?
Pārlūkā Chrome tiek piedāvāta “vietējā slinkā ielāde”. Par to var lasīt šeit.
Vietējai slinkai ielādei ir tāda priekšrocība, ka nav nepieciešams JavaScript, un tā parasti ir daudz ātrāka, jo pārlūkprogramma to veic "natively".
Kods izskatās šādi:
<img src="sample.jpg" loading="lazy" width="100%"/>Kas ir lidojošie attēli?
Flying Images ir augstas veiktspējas slinks ielādes spraudnis. Tas izmanto pārlūkprogrammas “vietējo” slinko ielādi, ja tā ir pieejama, pretējā gadījumā slinkai ielādei izmantojiet parasto JavaScript.
Lidojošie attēli var arī ielādēt attēlus, pirms tie pat parādās skata logā.
Vai jūs baidāties no slinkas ielādes, jo tas kaitē lietotāja pieredzei?
Kā lidojošie attēli atšķiras no citiem slinkas ielādes spraudņiem?
- Izmanto iebūvēto slinko ielādi - izmantojiet iebūvēto slinko ielādi, ja tā ir pieejama (šobrīd tiek atbalstīta tikai pārlūkā Chrome), pretējā gadījumā izmantojiet JavaScript, lai slinki ielādētu attēlus.
- Pirms skata loga ieiešanas ielādējiet attēlus - kamēr citi spraudņi ielādē attēlus, kad tie atrodas skata loga "iekšā", lidojošie attēli tos ielādē, kad tie gatavojas iekļūt skata logā.
- Mazs JavaScript - tikai 0,5 KB, saspiests, samazināts.
- Ja vēlaties, varat izmantot tikai vietējo – vēlaties atbalstīt tikai pārlūku Chrome? Varat pārslēgties uz “tikai vietējais”, kas neinjicē JavaScript.
- Pārraksta visu HTML kodu - nekad nepalaidiet garām attēlu slinkas ielādes dēļ (pat ja to ir pievienojuši galerijas spraudņi).
- Caurspīdīga pildviela - visiem attēliem ir pievienota niecīga caurspīdīga bāze64. Ielādējot attēlus, vairs nav mirgošanas.
- Izslēdziet atslēgvārdus - Gandrīz visi slinkās ielādes spraudņi nodrošina izslēgšanas funkciju, tomēr lidojošie attēli var arī izslēgt attēlus no attēla vecākmezgla. Noderīgi, ja attēlam nav klases nosaukuma.
- Atbalsta pārlūkprogrammas ar atspējotu IE un JavaScript - visi attēli tiek ielādēti uzreiz, ja tas ir Internet Explorer vai pat ja JavaScript ir pilnībā atspējots (izmantojot
noscripttag).
