Beskrivelse
lazysizes er en WordPress-utvidelsen for det høyytelses, SEO-vennlige og autokjørende biblioteket for forsinket innlasting med samme navn. Støtte inkluderer bilder (inklusivt responsive bildetmed srcset og picture-elementet), iframes, skript/widgeter og mye mer. Ressurser prioriteres også etter om de er synlige eller snart synlige, for å gjøre oppfattet ytelse enda høyere. I tillegg kan du legge til lavoppløste/blurry plassholderbilder med Blurhash-algoritmen.
Denne utvidelsen fungerer ved å laste inn lazysizes-skriptet og erstatte src og srcset-attributter med data-src og data-srcset for besøkende på WordPress-nettstedet ditt. Når et innlegg eller en side blir lastet inn, vil lazysizes-skriptet laste inn bilder, iframes osv. dynamisk når det trengs. Alt du trenger å gjøre er å aktivere utvidelsen, og kanskje justere et par innstillinger etter ønske.
Takk til aFarkas og bidragsyterne for å gjøre lazysizes-biblioteket mulig, og for å la meg bruke det samme navnet.
Også takk til dbhynds, som lagde Lazy Load XT-utvidelsen denne utvidelsen er basert på.
FAQ
-
Hvorfor blir ikke innlastingen av bildene mine forsinket?
-
Lazysizes filtrerer bilder som blir lagt til på siden ved å bruke
the_content,post_thumbnail_html,widget_textogget_avatar. Hvis bildene dine blir lagt til med en annen funksjon (for eksempelwp_get_attachment_image), kan ikke lazysizes filtrere de som standard. Det er flere muligheter for å endre hva lazysizes filtrerer, som å slå på filtrering avacf_the_contentfor WYSIWYG-innhold fra Avanserte egendefinerte felter, og å aktivere støtte forwp_get_attachment_image(noe begrenset, se under). For ikke-støttede tilfeller kan du også filtrere HTML-koden selv, ved å gi den som parameter tilget_lazysizes_html.Denne utvidelsen har støtte for
wp_get_attachment_image, men denne er deaktivert som standard siden utvidelsen ikke kan legge til en reserveløsning for når JavaScript er utilgjengelig, noe som ville gjort bilder usynlige for brukere i denne situasjonen. Vi kan ikke fikse dette automatisk, men du kan ordne det selv med noen få endringer i koden som brukerwp_get_attachment_image. For eksempel, hvis et tema har:echo wp_get_attachment_image($id);, kan du endre det til følgende for å forsinke innlasting av bilder, med reserveløsning ved mangel på JavaScript hvis dette er aktivert i innstillingene:echo get_lazysizes_html( wp_get_attachment_image($id) );Hvis en populær utvidelse ikke er kompatibel, og har et filter for å modifisere HTML-output, kan lazysizes mest sannsynlig legge til støtte for den utvidelsen. I så fall, spør gjerne! Hvis utvidelsen ikke har en slik måte å filtrere på, må de kanskje legge til et som lazysizes kan bruke.
-
Hva er funksjonen for Blurhash-plassholdere, og hvordan bruker jeg den?
-
Funksjonen med en lavoppløst Blurhash-plassholder genererer en tekststreng for hvert bilde ved hjelp av Blurhash-algoritmen. Denne strengen inneholder all informasjonen som trengs for at Blurhash-skriptet som gjører i den besøkendes nettleser kan dekode det til et blurry bilde, som viser mens det ekte bildet laster inn.
Fordi plassholder-bildet genereres fra Blurhash-strengen med JavaScript, kan brukere med en rask internettilkobling noen ganger se det fulle bildet direkte, for bilder som er synlig uten rulling av siden. Bilder lenger ned vil ha en plassholder klar innen brukeren når dem.
Plassholderens Blurhash-streng genereres ikke ved sideinnlasting, siden det i noen tilfeller kan ta flere sekunder. I stedet må den genereres på forhånd. Så lenge Blurhash er aktivert i innstillingene, vil alle nye bilder som lastes opp få en Blurhas-streng generert automatisk. Du kan i tillegg behandle Blurhash-strenger individuelt for hvert vedlegg i Mediebiblioteket. En innstilling finnes for å aktivere Blurhash-generering ved sideinnlasting, som kan brukes for å generere Blurhash-strenger for mange bilder om gangen, ved å besøke siden de vises på. Bare husk å skru av innstillingen igjen, ellers kan det hende de besøkende blir litt frustrerte.
Av tekniske årsaker er Blurhash bare støttet på lokale bildevedlegg, og for øyeblikket ikke offisielt støttet for picture-elementer. Bilder uten en Blurhash-streng vil oppføre seg akkurat som om Blurhash var skrudd av. Blurhash-plassholdere virker med eksisterende effekter som fade, men i noen tilfeller er kanskje ikke en perfekt fade-effekt mulig. Blurhash-plassholderen vil fortsatt fade inn, men vil kanskje ikke fade i overgangen til det fulloppløste bildet. Dette er på grunn av noen spesielle tilfeller som ikke støttes av den avanserte Blurhash-visningseffekten.
Den avanserte Blurhash-visningseffekten fungerer ved at den lager et ekstra bildeelement plassert bak det opprinnelige bildet. Dette, kombinert med fade-effekten, gir best resultat, men støtter kanskje ikke alle WordPress-temaer. Sikringstiltak eksisterer for å hindre at effekten brukes når den ikke støttes (da bruker den en ikke helt perfekt fade-effekt i stedet), men problemer kan muligens oppstå likevel. Hvis du ser et slikt problem kan du deaktivere den avanserte Blurhash-visningseffekten i innstillingene. Kontakt meg gjerne på støtteforumene, så kan jeg se om jeg kan klare å finne ut hva som gikk galt.
-
Det er en utvidelse som heter Lazy Load XT. Hvorfor ser denne utvidelsen litt lik ut?
-
PHP-koden til denne utvidelsen var opprinnelig basert på utvidelsen Lazy Load XT, men har siden gjennomgått mange endringer. Den største forskjellen er at denne utvidelsen bruker helt annet bibliotek for forsinket innlasting (lazysizes), som ikke er avhengig av jQuery. I tillegg er denne utvidelsen aktivt vedlikeholdt og har avanserte funksjoner, som støtte for Blurhash.
Takk til dbhynds for Lazy Load XT-utvidelsen. Uten det prosjektet ville ikke dette vært mulig.
-
Hvorfor er denne utvidelsen kalt lazysizes, det samme som JavaScript-biblioteket den bruker?
-
Det er flere grunner:
- Jeg liker navnet.
- Det er et passende navn, siden det får deg til å tenke på forsinket innlasting.
- Jeg håper dette vil hjelpe folk med å oppdage utvidelsen. Jeg prøvde opprinnelig å søke etter en WordPress-utvidelse med dette biblioteket selv, og andre folk vil kanskje gjøre det samme.
Denne utvidelsen er ikke tilknyttet lazysizes-prosjektet. Jeg spurte om, og fikk, tillatelse til å bruke navnet fra aFarkas. Det er den eneste koblingen mellom de to.
Vurderinger
Bidragsytere og utviklere
“lazysizes” er programvare med åpen kildekode. Følgende personer har bidratt til denne utvidelsen.
Bidragsytere
“lazysizes” har blitt oversatt til 2 språk. Takk til oversetterne for deres bidrag.
Oversett “lazysizes” til ditt språk.
Interessert i utvikling?
Bla gjennom koden, sjekk ut SVN-repositoriet, eller abonner på utviklingsloggen med RSS.
Endringslogg
1.3.3
- Add support for WordPress 5.5 and native lazy loading (see point below).
- Add option for full native lazyloading, which gives the browser full control over when to load the image. Not compatible with the old native lazy load option, which only gives the browser partial control over loading. Currently only supports images, other elements will be lazyloaded like previously.
- Add support for transforming HTML using single quotes instead of double quotes for attributes.
- Fix lazy loading for commenter avatars. This feature had actually been disabled for a while, because it was broken. The new support for single quote attributes fixes this.
- Fix positioning of the blurhash placeholder when the image is directly inside a link element.
- Fix Blurhash integration in the Media Library being incompatible with certain other plugins extending this area using JS. This mainly fixes compatibility with the plugin Smush, but should make other plugins more likely to work as well.
- Fix incompatibilities with certain older versions of WordPress. Please note that it is always recommended to use the latest version of WordPress, and that the next major version of this plugin will require a more up to date WordPress installation than it does now.
1.3.2
A partial deploy caused by human error led to a fatal error due to missing files for versions v.1.3.0 and v1.3.1. This has been fixed, along with the following:
- Fix warning caused by missing check for metadata existing.
- Fix script for the attachment page being minified even when SCRIPT_DEBUG is true.
- Properly implement Blurhash management support in the post editor.
- Fix non-existent CSS stylesheet being enqueued when no lazy load effect was selected.
- Improve logic for finding attachment id from an image url.
- Fix issue with minified lazysizes script.
1.3.0
Merk at dette er den siste utgivelsen som støtter PHP 5.6 og WordPress 3.9. Den neste vil mest sannsynlig kreve PHP 7.2 og WordPress 4.5 eller nyere.
- Add support for generating low-res placeholder images using Blurhash, which stores the placeholder as a short text string. Computing this string does not happen on page load, as it’s rather expensive, but when the blurhash placeholder option is enabled it can be controlled individually for each attachment, and new attachments will have a placeholder generated automatically. For more information, see the FAQ and the settings page.
- Add custom lazysizes script and styles feature, which uses scripts and styles optimized for size and fewer requests.
- Improve aspectratio calculation. Local images no longer need both width and height set, only one of them, since the aspect ratio can be calculated based on attachment metadata.
- Various performance tweaks.
- Add experimental option for skipping adding a src attribute to images, and letting the browser load the image progressively instead.
- Fix issue where a picture element with an excluded class could still be lazy loaded.
- Upgrade lazysizes library to 5.2.2.
1.2.1
- Forbedre logikk for å hoppe over transformering av bilder inne i noscript-elementer. Skal fikse kompatibilitetsproblemer med Envira Gallery sin noscript-reserveløsning. Takk til snippet24 for rapportering.
- Fiks at standardinnstillinger ikke er aktivert. Hvis du er påvirket av denne feilen, se en liste over anbefalte standardinnstillinger her. Takk til snippet24 for rapportering.
1.2.0
- Oppgrader lazysizes-biblioteket til versjon 5.2.0.
- Legg til valgfri støtte for Avanserte egendefinerte felter.
- Utvidelsen bruker nå namespaces for PHP-klasser.
- Bekreftet at utvidelsen virker med WordPress 5.3 og PHP 7.4.
1.1.0
- Oppgrader lazysizes-biblioteket til versjon 5.0.0
- Legg till eksperimentell støtte for innebygd forsinket innlasting.
- Fiks feil under ajax-behandling. Takk til @eastgate for rapportering.
- Fiks PHP-advarsel på enkelte sider, blant annet hendelser-siden fra utvidelsen The Events Calendar. Takk til @julian_wave for rapportering.
1.0.0
Stor takk til martychc23 og dutze for deres hjelp og tålmodighet. Uten dere ville ikke denne versjonen blitt så god som den er.
- Ordentlig støtte for picture-elementer, grunnet stor etterspørsel. Stor restrukturering av koden som transformerer sidens HTML var nødvendig for å gjøre denne støtten mulig.
- Forbedre og fiks støtte for audio/video-elementer. Utvidelsen håndterer nå preload-attributten og lar src-attributten være som den er på source-elementer inne i video/audio.
- Valgfri støtte for get_attachment_image. Merk at utvidelsen ikke kan legge til reserveløsning for brukere uten JavaScript for bilder som lastes inn på denne måten.
- Legg til innstilling for å aktivere/deaktivere noscript-reserveløsningen
- Fiks utvidelsens handlingslenker
- Flere feilfikser for å forbedre kompatibilitet
0.3.0
- Legg til støtte for aspectratio-utvidelsen for lazysizes, som gjør at bilder har riktig høyde mens de lastes inn. Takk til Teemu Suoranta (@teemusuoranta) for implementering.
- Hvis Javascript er skrudd av, vil bildeelementet som normalt ville vært lastet inn forsinket nå være skjult. Takk til @diegocanal for rapportering og fiksing av denne feilen.
0.2.0
- Oppdater lazysizes-biblioteket til versjon 4.1.5
- Fiks forsinket innlasting av elementer uten en klasse-attributt, for eksempel noen iframe-innbygginger
- Fiks innlasting av oversettelser
0.1.3
- Fjern ubrukt kode for avanserte innstillinger
0.1.2
- Fiks innlasting av tekstdomene
0.1.1
- Uppdaterte readme
0.1.0
- Opprinnelig versjon av utvidelsen