De Complete Gids voor Luie het Laden van Afbeeldingen

0
46

De beelden zijn van cruciaal belang. Of is het marketing, banners, afbeeldingen of logo ‘ s, het is onmogelijk om te denken aan een website zonder afbeeldingen. Helaas echter, de beelden zijn vaak zware bestanden, waardoor ze de grootste bijdrage aan de pagina zwellen. Volgens het HTTP-Archief Staat van Afbeeldingen rapport, de mediaan van de pagina grootte van desktops is 1511 KB en afbeeldingen goed voor bijna 45% (650 KB) van dat totaal.

Dat gezegd hebbende, het is niet zo dat we kunnen gewoon weg te doen met beelden. Ze zijn te belangrijk voor de algehele gebruikerservaring. In plaats daarvan moeten we ervoor zorgen dat onze webpagina ‘ s laden erg snel met hen. In deze handleiding behandelen we alle ins en outs van lazy loading beelden, een techniek die helpt bij het verbeteren van de tijd die het kost om een webpagina te laden door uitstel van de afbeelding wordt geladen totdat ze nodig zijn.

Voordat we duiken recht in, hier is een voorbeeld van een filmpje waarin het concept. Kortom, een grijze aanduiding vak wordt weergegeven op de pagina totdat het rollen in beeld—op welk punt de werkelijke afbeelding wordt geladen in plaats van het vak.

Hoofdstuk 1: Wat is Lui Laden?

We vaak associëren het woord “lui” met het vermijden van werken zo lang als mogelijk is, of de pure daad van willen naar doen helemaal niets.

Evenzo, lazy loading uitstelt, wordt het laden van de bronnen op de pagina als u ze niet nodig hebt. In plaats van het laden van de juiste afstand, dat is wat meestal gebeurt, laten we hen om later opnieuw laden.

Lazy Loading is een set van technieken in web-en applicatie-ontwikkeling dat uitstelt, wordt het laden van de middelen op een pagina naar een later punt in tijd wanneer die middelen daadwerkelijk nodig is in plaats van het laden aan de voorkant. Deze technieken helpen bij het verbeteren van prestaties, betere benutting van het apparaat van de middelen en het verminderen van de daaraan verbonden kosten.

De techniek van lazy loading kan worden toegepast op vrijwel elk middelen op een pagina. Bijvoorbeeld, zelfs een JavaScript-bestand kunt worden tegengehouden als het is het beste om het te laden in eerste instantie. Dezelfde deal voor een afbeelding in te laden wanneer we het nodig hebben.

We blijven aan de luie het laden van de afbeeldingen in deze handleiding, maar het is goed om te weten dat het kan worden toegepast op andere activa.

Hoofdstuk 2: Waarom Lazy Load op Alle?

Als de gebruiker nooit schuift naar de punt van de pagina met de afbeelding, dan is de gebruiker ziet niet in dat beeld. Het is ook nooit belasting in de eerste plaats omdat, hé, het was nooit nodig.

U kan al beginnen om te zien hoe dit biedt voordelen voor zowel u en de gebruiker. Hier zijn twee van de voordelen die we krijgen met lazy loading.

Prestaties

De voor de hand liggende voordeel is dat we kleinere webpagina ‘ s sneller laden. Lazy loading vermindert het aantal beelden dat moet worden geladen op een pagina. Minder afbeelding verzoeken betekenen dat er minder bytes om te downloaden. En minder bytes downloaden, betekent dat de pagina sneller rendert dan als die bytes en verzoeken werden gemaakt.

Dit zorgt ervoor dat elk apparaat op een netwerk is in staat om te downloaden en verwerken van de resterende middelen veel sneller. Dus, de tijd van de aanvraag te maken wordt kleiner en de pagina wordt bruikbare veel eerder. Win-Win!

De vermindering van de kosten

Het tweede voordeel is voor u als website beheerder. Cloud hosting diensten, zoals Content Delivery Networks (Cdn ‘ s) of web servers of opslagmedia, het leveren van afbeeldingen (of een asset voor die kwestie), de kosten op basis van het aantal bytes dat is overgebracht. Een luie geladen afbeelding kan nooit geladen als de gebruiker nooit bereikt. U kunt dus het verminderen van het totaal aantal bytes geleverd op de pagina en uiteindelijk bespaar je jezelf een paar centen in het proces. Dit geldt vooral voor gebruikers die direct te stuiteren van een pagina of werken alleen met het bovenste gedeelte van de inhoud.

De vermindering in het aantal bytes dat is overgebracht van uw levering netwerk of de server vermindert de levering kosten. Dit zal duidelijker worden als we verkennen lui laden in de komende secties.

Hoeveel bespaart u? U kunt zien welke afbeeldingen zijn deze een kandidaat voor luie laden en hoeveel bytes u kunt besparen op de eerste pagina te laden met behulp van de Google Vuurtoren audit tool. Dit is een speciale sectie gewijd voor offscreen beelden. U kunt ook gebruik maken van ImageKit de website analyzer te identificeren als uw website maakt gebruik van lazy loading of niet onderscheidt van andere kritische beeld met betrekking optimalisaties op uw pagina.

Lazy loading is van cruciaal belang en niet alleen aan goede prestaties, maar ook voor de levering van een goede gebruikerservaring. Omdat het combineren van de prestaties en de gebruikerservaring met lazy loading is het belangrijk en uitdagend zijn, we blijven besteden aan dit onderwerp in meer detail in deze handleiding nadat we hebben gekeken naar verschillende manieren om een lui afbeeldingen laden.

Hoofdstuk 3: Lazy Loading Technieken voor Afbeeldingen

Er zijn twee manieren die we laden van afbeeldingen op een pagina: de <img> – tag en de CSS background-image eigenschap. We zullen eerst kijken naar de meest voorkomende van de twee, de <img> – tag en vervolgens naar CSS achtergrond afbeeldingen.

Luie het laden van afbeeldingen in een image tag

Laten we beginnen met de typische HTML-code voor een afbeelding:

<img src=”/path/to/some/image.jpg” />

De markup voor luie het laden van afbeeldingen is vrij gelijkaardig.

Stap één is om te voorkomen dat de afbeelding wordt geladen. De browser maakt gebruik van de src-attribuut van een tag om te activeren van de afbeelding te laden. Het maakt niet uit of het de eerste of de 1000 ste afbeelding in uw HTML-code. Als de browser krijgt het src-attribuut, het zal leiden tot de afbeelding te downloaden, ongeacht of deze binnen of buiten de huidige weergave.

Aan het uitstellen van de belasting, zet de URL van de afbeelding in een attribuut andere dan src. Laten we zeggen dat we het opgeven van de URL van de afbeelding in de data-src-attribuut van de afbeelding tag. Nu dat de src is leeg en de browser zal niet leiden tot het beeld belasting:

<img data-src=”https://ik.imagekit.io/demo/default-image.jpg” />

Dat zijn we nu aan het voorkomen van de afbeelding wordt geladen, moeten we vertellen de browser bij het laden. Anders zal het nooit gebeuren. Voor dit controleren wij of zodra de afbeelding (d.w.z. de tijdelijke aanduiding) komt in de viewport, we trigger van de belasting.

Er zijn twee manieren om te controleren wanneer er een afbeelding komt in de viewport. Laten we eens kijken naar beiden werken met code voorbeelden.

Methode 1: het Activeren van het plaatje laden met behulp van Javascript events

Deze techniek maakt gebruik van gebeurtenislisteners op de bladeren, de grootte en orientationChange gebeurtenissen in de browser. De bladeren evenement is vrij duidelijk omdat deze horloges waar de gebruiker op een pagina scrollen. De grootte en orientationChange gebeurtenissen zijn even belangrijk. De resize-gebeurtenis treedt op wanneer het venster van de browser verandert, terwijl orientationChange wordt geactiveerd wanneer het apparaat wordt gedraaid van landschap tot portret, of vice versa.

We kunnen gebruik maken van deze drie gebeurtenissen te herkennen van een verandering in het scherm en het bepalen van het aantal foto ‘ s die zichtbaar worden op het scherm, en leiden ze aan belasting dienovereenkomstig.

Wanneer een van deze gebeurtenissen zich voordoen, zien we dat alle afbeeldingen op de pagina worden uitgesteld en, van deze beelden, controleren wij welke producten zijn momenteel in de viewport. Dit is gedaan met behulp van een afbeelding van de top-offset, het huidige document top positie, en venster in de hoogte. Als een afbeelding is opgenomen in de viewport, we halen de URL van de data-src-attribuut en verplaats het naar de src-attribuut en de afbeelding wordt geladen als gevolg.

Merk op dat vragen we van JavaScript afbeeldingen te selecteren die bevatten een luie klasse. Zodra de afbeelding is geladen, verwijderen we de klasse, omdat het niet langer nodig om een gebeurtenis te activeren. En, zodra alle afbeeldingen geladen zijn, verwijderen we het event listeners.

Wanneer we scroll, scroll event triggers meerdere keren snel. Dus, voor prestaties, voegen we een kleine time-out om ons script dat onderdrukt de lazy loading functie-uitvoering, zodat het niet blokkeren van andere taken die in dezelfde thread in de browser.

Hier is een voorbeeld van deze aanpak.

Zie de Pen Lui laden van afbeeldingen met behulp van event-handlers – voorbeeld code door ImageKit.io (@imagekit_io) op CodePen.

Merk op dat de eerste drie foto ‘ s in dit voorbeeld zijn geladen. De URL is aanwezig direct in het src-attribuut in plaats van de data-src-attribuut. Dit is essentieel voor een goede gebruikerservaring. Aangezien deze afbeeldingen zijn aan de bovenkant van de pagina, ze moeten zichtbaar worden gemaakt zo snel mogelijk. Er is geen noodzaak om te wachten voor JavaScript te laden.

Methode 2: het Activeren van het plaatje laden met de Kruising Waarnemer API

De Kruising Waarnemer API is relatief nieuw. Het maakt het eenvoudig om te detecteren wanneer een element komt in de viewport en actie te ondernemen wanneer het goed gaat. In de vorige methode, hadden we te binden gebeurtenissen, houden het oog op prestaties en implementeren van een manier om te berekenen of het element in de viewport of niet. De Kruising Waarnemer API verwijdert al die overhead door het vermijden van de wiskunde en het leveren van grote prestaties uit het vak.

Hieronder is een voorbeeld van het gebruik van de API te lui afbeeldingen laden. Wij hechten de waarnemer op de afbeeldingen om lui te zijn geladen. Zodra de API detecteert dat het element is opgenomen in de viewport, met behulp van de isIntersecting goederen, halen we de URL van de data-src-attribuut en het te verplaatsen naar het src attribuut voor de browser te activeren wordt de afbeelding te laden. Zodra dit gedaan is, verwijderen we de luie klasse van het beeld en ook verwijderen van de waarnemer van dat beeld.

Zie de Pen Lui laden van afbeeldingen met behulp van IntersectionObserver – voorbeeld code door ImageKit.io (@imagekit_io) op CodePen.

Als je het vergelijkt met het laden van afbeeldingen tijden voor de twee methoden (event listeners vs. Kruising Waarnemer), zult u merken dat beelden veel sneller laden met de Kruising Waarnemer API en dat de actie wordt geactiveerd sneller als goed en toch is de site lijkt niet traag, zelfs in het proces van schuiven. In de methode waarbij evenement luisteraars, we hadden voor het toevoegen van een time-out te maken performant, die heeft een licht negatief effect op de ervaring van de gebruiker als de afbeelding geladen wordt geactiveerd met een lichte vertraging.

Echter, zoals met elke nieuwe feature is de ondersteuning voor het Kruispunt Waarnemer API is niet beschikbaar op alle browsers.

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
58 45 55 Geen 16 Geen

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Geen 46 Geen 67 69 62

Dus, we nodig hebben om terug te vallen op de event-listener methode in browsers waar de Kruising Waarnemer API wordt niet ondersteund. Wij hebben hiermee rekening gehouden in het voorbeeld hierboven.

Hoofdstuk 4: Luie het Laden van CSS Achtergrond Afbeeldingen

Een gemeenschappelijke achtergrond in de CSS:

.mijn-klasse {
background-image: url(‘/path/to/some/image.jpg’);
/* stijlen */
}

CSS achtergrond afbeeldingen zijn niet zo eenvoudig als de image tag. Te laden, moet de browser om te bouwen van de DOM-boom en de CSSOM boom om te beslissen of de CSS-stijl van toepassing is op een DOM knooppunt in het huidige document. Als de CSS-regel met vermelding van de achtergrond afbeelding is niet van toepassing op een element in het document, dan wordt de browser niet het laden van de achtergrond-afbeelding. Als de CSS-regel van toepassing is op een element in het huidige document, dan laadt de browser de afbeelding.

Huh? Dit kan ingewikkeld lijken op het eerste, maar dit probleem vormt de basis van de techniek voor luie het laden van achtergrond afbeeldingen. Simpel gezegd, we de truc van de browser in het niet toepassen van de achtergrond-afbeelding CSS eigenschap van een element, tot dat element komt in de viewport.

Hier is een voorbeeld werken die lui laadt een CSS-achtergrond-afbeelding.

Zie de Pen Lazy Loading achtergrond afbeeldingen in CSS door ImageKit.io (@imagekit_io) op CodePen.

Een ding om op te merken is dat de JavaScript-code voor luie laden is nog steeds hetzelfde. We zijn nog steeds met de Kruising Waarnemer API-methode met een fallback naar het event listeners. De “truc” ligt in de CSS.

Wij hebben een element met ID bg-afbeelding met een achtergrond-afbeelding. Echter, wanneer we de lui class met het element, kunnen we het overschrijven van de background-image eigenschap door het instellen van de waarde van het geen in de CSS.

Sinds een element met een ID en een class heeft een hogere specificiteit in CSS dan een ID-alone, de browser van toepassing is de eigenschap background-image: none naar het element dat in eerste instantie. Als we naar beneden scrollen, het Kruispunt Waarnemer API (of event listeners, afhankelijk van de methode die u kiest) detecteert dat het beeld in de viewport, het verwijdert de luie klasse van het element. Verandert dit de toepassing van CSS en geldt de werkelijke background-image eigenschap voor het element, waardoor de belasting van de achtergrond afbeelding.

Hoofdstuk 5: het Creëren van een Betere gebruikerservaring Met Lazy Loading

Lazy loading presenteert een geweldige prestatie voordeel. Voor een e-commerce bedrijf dat de ladingen honderden afbeeldingen op een pagina, lazy loading kan zorgen voor een significante verbetering in de eerste pagina wordt geladen terwijl het verminderen van de bandbreedte verbruik.

Echter, veel van de bedrijven niet kiezen voor luie laden, omdat ze geloven dat het gaat tegen het leveren van een goede user experience (d.w.z. de eerste aanduiding is lelijk, de laadtijden zijn traag enz.).

In deze sectie zullen we proberen op te lossen sommige problemen rond de gebruikerservaring met luie het laden van afbeeldingen.

Tip 1. Gebruik de Juiste Aanduiding

Een tijdelijke aanduiding wordt weergegeven in de container tot de afbeelding wordt geladen. Normaal gesproken zien we ontwikkelaars met een effen kleur tijdelijke aanduiding voor foto ‘ s of een enkel beeld als een tijdelijke aanduiding voor alle afbeeldingen.

De voorbeelden die we hebben gekeken naar tot dusver hebben gebruikt voor een vergelijkbare aanpak: een doos met een effen lichtgrijze achtergrond. Echter, we doen het beter om een meer aangenaam gebruikers ervaring. Hieronder zijn twee voorbeelden van het gebruik van betere aanduidingen voor onze beelden.

De Dominante Kleur Aanduiding

In plaats van een vaste kleur voor de afbeelding aanduiding vinden we de dominante kleur van de originele afbeelding en gebruik dat als tijdelijke aanduiding. Deze techniek is gebruikt voor heel wat tijd door Google in de zoekresultaten voor afbeeldingen alsmede door Pinterest in het raster design.

Pinterest maakt gebruik van de dominante kleur van de afbeelding als de achtergrondkleur van de afbeelding tijdelijke aanduidingen.

Dit ziet er misschien ingewikkeld om te bereiken, maar een zeer eenvoudige manier om dit te bereiken is om de schaal van de afbeelding naar beneden op een 1×1 pixel en vervolgens op te schalen tot de omvang van de tijdelijke aanduiding—een zeer ruwe benadering, maar een simpel, geen gedoe manier om een enkele dominante kleur. Met behulp van ImageKit, de dominante kleur aanduiding kan worden verkregen met behulp van een geketende transformeren in ImageKit zoals hieronder weergegeven.

<!– De originele afbeelding op 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt= ‘originele afbeelding” />

<!– De dominante kleur afbeelding met dezelfde afmetingen –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-1 h-1:w-400,h-300″ alt=”dominante kleur aanduiding” />

De tijdelijke aanduiding voor afbeelding is slechts 661 bytes in grootte ten opzichte van het oorspronkelijke beeld dat 12700 bytes—19x kleiner. En het zorgt voor een mooiere overgang ervaring van tijdelijke aanduiding voor de afbeelding.

Hier is een video zien hoe dit effect werkt voor de gebruiker.

Zie de Pen Dominante kleur aanduiding – Lazy het laden van afbeeldingen met behulp van IntersectionObserver – voorbeeld code door ImageKit.io (@imagekit_io) op CodePen.

De Kwaliteit van de Afbeelding tijdelijke Aanduiding (LQIP)

We kunnen uitbreiden van het bovenstaande idee van het gebruik van een dominante kleur tijdelijke verder. In plaats van een enkele kleur, maken we gebruik van een zeer lage kwaliteit, vage versie van het oorspronkelijke beeld als tijdelijke aanduiding. Ziet er niet alleen goed uit, maar het geeft de gebruiker een idee over wat het werkelijke beeld eruit ziet en het beeld dat de afbeelding geladen is in uitvoering. Dit is geweldig voor het verbeteren van de waargenomen laden ervaring. Deze techniek is gebruikt door de wil van en Medium.

LQIP afbeeldings-URL bijvoorbeeld met behulp van ImageKit:

<!– De originele afbeelding op 400×300 –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300″ alt= ‘originele afbeelding” />

<!– De kwaliteit van de afbeelding aanduiding met dezelfde afmetingen –>
<img src=”https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400 h-300,bl-30,q-50″ alt=”dominante kleur aanduiding” />

De LQIP is 1300 bytes in grootte, nog steeds bijna 10x kleiner is dan het oorspronkelijke beeld en een aanzienlijke verbetering in termen van visuele ervaring op enige andere aanduiding techniek.

Hier is een video zien hoe dit effect werkt voor de gebruiker.

Zie de Pen LQIP aanduiding – Lazy het laden van afbeeldingen met behulp van IntersectionObserver – voorbeeld code door ImageKit.io (@imagekit_io) op CodePen.

Het is duidelijk dat het gebruik van hetzij de dominante kleur of LQIP tijdelijke aanduidingen biedt een soepeler overgang van de tijdelijke aanduiding voor de afbeelding, geeft de gebruiker een idee van wat er gaat komen, in plaats van dat de tijdelijke aanduiding en verbetert het laden van de waarneming.

Tip 2: Voeg Buffer Tijd voor Afbeeldingen te Laden

Toen we het over verschillende methoden om de trigger afbeelding is geladen, we gecontroleerd voor de punt van de tijd, waar het beeld komt in de viewport, d.w.z. de afbeelding geladen wordt geactiveerd wanneer de bovenste rand van de afbeelding aanduiding samenvalt met de onderkant van de viewport.

Het probleem met dit is dat gebruikers misschien ga echt snel door de pagina ‘ s en de afbeelding zal enige tijd nodig hebben om te laden en op het scherm verschijnen. In combinatie met beperking van eventueel verder vertragen het laden, kan de gebruiker de wind te wachten op een paar milliseconden langer voor het beeld om te laten zien omhoog. Niet geweldig voor user experience!

Terwijl we een vrij goede ervaring van gebruikers met de Kruising Waarnemer API voor prestaties en LQIP voor een soepelere overgangen, er is een andere eenvoudige truc die u kunt gebruiken om ervoor te zorgen dat de afbeeldingen altijd volledig geladen wanneer ze in de viewport : de invoering van een marge om het activatiepunt in voor de beelden.

In plaats van het laden van de afbeelding precies wanneer het in de viewport, laden wanneer het is, laten we zeggen, 500 px voordat het in de viewport. Dit zorgt voor extra tijd, tussen de belasting van de trekker en de werkelijke instap in de viewport, om de afbeeldingen te laden.

De Kruising Waarnemer API, kunt u gebruik maken van het root parameter samen met de rootMargin parameter (werkt standaard CSS marge regel), een verhoging van de effectieve bounding box wordt gezien als het vinden van het snijpunt. Met de event-listener methode, in plaats van het controleren van het verschil tussen het beeld van de rand en de viewport van de rand van 0, kunnen we gebruik maken van een positief getal voor het toevoegen van sommige drempel.

Zie de Pen Lui laden van afbeeldingen met extra drempel – voorbeeld code door ImageKit.io (@imagekit_io) op CodePen.

Als u kijken naar de volgende screencast kijkt, zult u merken dat de vijfde afbeelding in de reeks wordt geladen wanneer de derde foto te zien is. Ook de zesde afbeelding wordt geladen wanneer de vierde is in zicht, en dus op. Op deze manier geven we voldoende tijd voor de afbeeldingen om volledig te laden en in de meeste gevallen zal de gebruiker niet ziet is de tijdelijke aanduiding.

Als je niet in de gaten eerder, in al onze voorbeelden, de derde afbeelding (image3.jpg) is altijd geladen, zelfs al is het buiten de viewport. Dit werd ook gedaan voor dezelfde opdrachtgever: plaats iets vooraf in plaats van het laden precies op de drempel voor een betere gebruikerservaring.

Tip 3: Vermijd Inhoud Reflow

Dit is een triviaal punt, die, als ze worden opgelost, kan helpen bij het behouden van een goede gebruikerservaring.

Als er geen beeld verschijnt, is de browser niet weten wat de grootte van het beslag zullen nemen. En als we niet opgeven met behulp van CSS, dan is het omsluiten van de container zou geen dimensies, dat wil zeggen het zal worden gelezen als 0x0 pixels.

Als de afbeelding is geladen in de browser zal neerzetten in het scherm en opnieuw plaatsen van de content aan te passen. Deze plotselinge verandering in de lay-out veroorzaakt andere elementen om te bewegen en wordt het genoemd, content reflow, of verschuiven. Michael Scharnagl gaat in detail uit te leggen hoe dit creëert een onaangename ervaring bij de gebruiker.

Dit kan vermeden worden door het opgeven van een hoogte en/of breedte voor het omsluiten van de container zodat de browser kunt schilderen het beeld container met een bekende hoogte en breedte. Later, wanneer de afbeelding wordt geladen, omdat de container formaat is al opgegeven en het beeld past dat perfect, de rest van de inhoud rond dat de container niet meer kan bewegen.

Tip 4: Vermijd Luie Het Laden Van Elke Afbeelding

Dit is een fout die ontwikkelaars maken vaak, want het is super verleidelijk om te denken dat uitstel van de afbeelding wordt geladen, is goed de hele tijd. Maar, zoals het leven zelf, het is mogelijk om te veel van het goede. Lazy loading kunnen verminderen van de initiële laden van de pagina, maar het kan ook leiden tot een slechte gebruikerservaring als sommige beelden worden uitgesteld wanneer zij niet zouden moeten worden.

We volgen een aantal algemene principes vast te stellen welke beelden moeten worden lui geladen. Bijvoorbeeld, een beeld dat aanwezig is in de viewport, of aan het begin van de webpagina, moet waarschijnlijk niet worden lui geladen. Dit geldt voor elke header image, marketing, banner, logo ‘ s, of echt iets dat de gebruiker te zien bij de eerste landing op een pagina. Vergeet ook niet dat de mobiele en desktop apparaten hebben verschillende scherm groottes, en dus een verschillend aantal beelden dat wordt weergegeven op het scherm in eerste instantie. U zult willen nemen van het apparaat dat wordt gebruikt, rekening houdend met en te beslissen welke middelen zijn om te laden voor en die te lui laden.

Een ander voorbeeld is een afbeelding die is zelfs iets los van de viewport in de initiële belasting mag niet waarschijnlijk niet lui te zijn geladen. Dit is het principe van de hierboven besproken—belasting iets vooraf. Dus, laten we zeggen een beeld dat is 500 px of een enkele bladeren van de onderkant van de viewport kan worden geladen vooraan.

Nog een voorbeeld is als de pagina is te kort. Het kan een enkele bladeren of een paar rollen, of misschien zijn er minder dan vijf afbeeldingen buiten de viewport. In deze gevallen kunt u waarschijnlijk laat lazy loading helemaal uit. Het zou geen significant voordeel voor de eindgebruiker in termen van prestaties en de extra JavaScript dat u de belasting op de pagina inschakelen luie het laden van de compensatie van het mogelijke winst krijg je van het.

Hoofdstuk 5: Lazy Loading-Afhankelijkheid van JavaScript

Het hele idee van de luie laden is afhankelijk van JavaScript zijn ingeschakeld en beschikbaar zijn in de browser van de gebruiker. Terwijl de meeste van uw gebruikers zullen ook JavaScript hebben ingeschakeld, is het essentieel om een plan voor de gevallen waar het niet.

U kan een bericht wordt weergegeven waarin gebruikers waarom de afbeeldingen niet te laden en hen aan te moedigen om ofwel gebruik maken van een moderne browser of schakel JavaScript in.

Een andere route is om gebruik te maken van de noscript-tag. Echter, deze aanpak wordt geleverd met een aantal valkuilen. Deze vraag draad op Stack Overflow heeft een geweldige job het aanpakken van deze problemen en is een aanbevolen te lezen voor iedereen die op zoek om deze groep gebruikers.

Hoofdstuk 6: het Populaire JavaScript Bibliotheken voor Luie Laden

Sinds omgevingen en details over de implementatie kan variëren in verschillende browsers en apparaten, wilt u misschien overwegen om een beproefd en getest bibliotheek voor luie laden liever dan spinnen, iets van de grond af.

Hier is een lijst van populaire bibliotheken en platform specifieke plugins die u zal toestaan om te implementeren lui laden met een minimale inspanning:

    >Nog een Lazy Loader: Deze bibliotheek maakt gebruik van de Kruising Waarnemer API en valt terug op het evenement, op basis van lazy loading voor browsers die het ondersteunen nog niet. Dit is geweldig voor vrijwel elk HTML-element, maar helaas werkt het niet op de achtergrond afbeeldingen in CSS. Het goede nieuws is dat het ondersteunt IE terug naar versie 11.

  • lazysizes: Dit is een zeer populaire bibliotheek met uitgebreide functionaliteit. Het omvat ondersteuning voor responsive afbeelding srcset en maten kenmerken en biedt uitstekende prestaties hoewel het niet gebruik maken van de Kruising Waarnemer API.
  • WordPress A3 Lui Belasting: Er zijn tal van lazy loading WordPress plugins die er zijn, maar deze wordt geleverd met een krachtige set functies, waaronder een fallback als JavaScript niet beschikbaar is.
  • jQuery Lui: Een eenvoudige bibliotheek maakt gebruik van een jQuery uitvoering.
  • WeltPixel Lazy Loading Verbeterd: Een Magento 2-extensie.
  • Magento Lui Image Loader: Een Magento extensie voor 1.x.
  • Shopify Lui Image Plugin (betaald): Inschakelen lui laden op een Shopify site.

Hoofdstuk 7: Het Testen Van Lazy Load

Als je eenmaal hebt uitgevoerd lazy loading, zal je waarschijnlijk willen controleren dat het werkt zoals het bedoeld is. De eenvoudigste manier zou zijn om de openstelling van de developer tools in uw browser.

Van daar, ga naar Netwerk > Afbeeldingen. Als u bij het vernieuwen van de pagina voor de eerste keer, je moet het alleen zien geladen afbeeldingen in de lijst.

Vervolgens, als u begint met het naar beneden scrollen op de pagina een andere afbeelding laden verzoeken zou krijgen geactiveerd en geladen. U kunt ook de tijden voor de afbeelding te laden in de waterval kolom in deze weergave. Het zou helpen bij het identificeren laden van afbeeldingen problemen als een of problemen in het activeren van de afbeelding te laden.

Een andere manier zou zijn om het Google Chrome-Vuurtoren audit rapport op uw pagina nadat u hebt uitgevoerd van de veranderingen en kijk voor suggesties onder de “Offscreen afbeeldingen” sectie.

Conclusie

Wij hebben veel grond over luie het laden van afbeeldingen! Lazy loading—indien uitgevoerd goed kan aanzienlijke voordelen op de prestaties van uw site het laden van prestaties en het verminderen van de totale pagina grootte en de verzendkosten, dankzij uitstel van onnodige bronnen.

Dus, waar wacht je nog op? Aan de slag met lazy loading images now!