da.allworldrating.com
Artikler

Flying Images er et højtydende plugin til doven indlæsning.

Hvordan fungerer doven læsning?

Et normalt HTML-billede ser således ud:

<img src="sample.jpg" width="100%"/>

Lazy loading plugins omskriver koden sådan her:

<img data-src="sample.jpg" width="100%"/>

Som du har bemærket,srcattribut er blevet ændret tildata-src.

Fordi Nejsrc, browseren indlæser ikke dette billede til at begynde med. Senere tjekker en lille JavaScript-kode, om billedet er i viewporten (brugerens viewport), og om det er inde,data-srcvender tilbage til detsrchvilken browser der udløser download og visning af billedet.

Hvad er native lazy loading?

Chrome leveres med "native lazy loading". Du kan læse om det her.

Native lazy loading har den fordel, at der ikke er behov for JavaScript og er generelt meget hurtigere, da browseren gør det "native".

Koden ser sådan ud:

<img src="sample.jpg" loading="lazy" width="100%"/>

Hvad er flyvende billeder?

Flying Images er et højtydende plugin til doven indlæsning. Den bruger browserens "native" lazy loading, hvis den er tilgængelig, ellers brug almindelig JavaScript til doven indlæsning.

Flying Images kan også indlæse billeder, før billederne overhovedet vises i viewporten.

Er du bange for doven indlæsning, fordi det skader brugeroplevelsen?

Hvordan adskiller flyvende billeder sig fra andre plugins til doven indlæsning?

  • Bruger indbygget lazy loading - brug indbygget lazy loading, hvis det er tilgængeligt (i øjeblikket kun understøttet i Chrome), ellers brug JavaScript til doven indlæsning af billeder.
  • Indlæs billeder, før du går ind i viewport - mens andre plugins indlæser billeder, når de er "inde i" viewporten, indlæser flyvende billeder dem, når de er ved at gå ind i viewporten.
  • Lille JavaScript - kun 0,5 KB, komprimeret, reduceret.
  • Hvis det ønskes, kan du kun bruge native – vil du kun understøtte Chrome? Du kan skifte til "kun native", som ikke injicerer JavaScript.
  • Omskriver al HTML-kode - Gå aldrig glip af et billede på grund af doven indlæsning (selvom det er tilføjet af galleri-plugins).
  • Gennemsigtigt fyldstof - en lille gennemsigtig base64 er tilføjet til alle billeder. Ikke mere flimren ved indlæsning af billeder.
  • Ekskluder søgeord - Næsten alle plugins til doven indlæsning giver en ekskluderingsfunktion, men flyvende billeder kan også udelukke billeder fra billedforælderknuden. Nyttigt, hvis dit billede ikke har et klassenavn.
  • Understøtter browsere med IE og JavaScript deaktiveret - alle billeder indlæses øjeblikkeligt, hvis det er Internet Explorer, eller selvom JavaScript er fuldstændig deaktiveret (ved hjælp afnoscripttag).

Interessante Artikler