no.allworldrating.com
Artikler

Flying Images er en plugin for lat lasting med høy ytelse.

Hvordan fungerer lat lasting?

Et vanlig HTML-bilde ser slik ut:

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

Lazy loading plugins omskriver koden slik:

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

Som du la merke til,srcattributt er endret tildata-src.

Fordi neisrc, laster ikke nettleseren først dette bildet. Senere sjekker en liten JavaScript-kode om bildet er i viewporten (brukerens viewport), og om det er inne,data-srckommer tilbake til detsrchvilken nettleser som utløser nedlasting og visning av bildet.

Hva er native lazy loading?

Chrome kommer med "native lazy loading". Du kan lese om det her.

Native lazy loading har fordelen at det ikke er behov for JavaScript og er generelt mye raskere siden nettleseren gjør det "native".

Koden ser slik ut:

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

Hva er flygende bilder?

Flying Images er en plugin for lat lasting med høy ytelse. Den bruker nettleserens "native" late lasting hvis tilgjengelig, ellers bruk vanlig JavaScript for lat lasting.

Flying Images kan også laste inn bilder før bildene i det hele tatt vises i visningsporten.

Er du redd for lat lasting fordi det skader brukeropplevelsen?

Hvordan er flygende bilder forskjellig fra andre plugins for lazy loading?

  • Bruker innebygd lazy loading - bruk innebygd lat lasting hvis tilgjengelig (støttes for øyeblikket kun i Chrome), ellers bruk JavaScript for lat lasting av bilder.
  • Last inn bilder før du går inn i viewport - mens andre plugins laster inn bilder når de er "inne" i viewporten, laster flygende bilder dem når de er i ferd med å gå inn i viewporten.
  • Liten JavaScript - bare 0,5 KB, komprimert, redusert.
  • Hvis ønskelig, kan du bare bruke native – vil du kun støtte Chrome? Du kan bytte til "bare innfødt", som ikke injiserer JavaScript.
  • Omskriver all HTML-kode - aldri gå glipp av et bilde på grunn av lat lasting (selv om det er lagt til av galleriplugins).
  • Gjennomsiktig filler - en liten gjennomsiktig base64 er lagt til alle bilder. Ikke mer flimring når du laster inn bilder.
  • Ekskluder søkeord - Nesten alle plugins for lat lasting gir en ekskluderingsfunksjon, men flygende bilder kan også ekskludere bilder fra overordnet bilde. Nyttig hvis bildet ditt ikke har et klassenavn.
  • Støtter nettlesere med IE og JavaScript deaktivert - alle bilder lastes umiddelbart hvis det er Internet Explorer eller selv om JavaScript er fullstendig deaktivert (ved å brukenoscriptstikkord).

Interessante Artikler