Što je lijeno učitavanje. “Lijeno učitavanje” sadržaja na odredišnoj stranici

Lijeno učitavanje je programsko jQuery dodatak, napisan u JavaScriptu, koji odgađa učitavanje slika na (velike) web stranice. Stoga se slike koje nisu u korisnikovom vidnom polju neće otvoriti sve dok korisnik ne skrola po stranici. Ista stvar kao predučitavanje, samo obrnuto.

Korištenje "lijenog učitavanja" na stranicama koje sadrže mnogo velikih slika omogućuje vam ubrzanje učitavanja stranice - preglednik će prijaviti potpuno otvaranje čim se otvore sve vidljive slike. U nekim slučajevima korištenje ovog modula pomaže smanjiti opterećenje poslužitelja.

Program je napisan na temelju modula za učitavanje slika YUI ImageLoader Utility, autor programa je Matt Mlinak.

Pomaknite se stranicama prema dolje da vidite učinak.

Još nije bilo moguće prikupiti izvorni kod. Radim na tome.

Kako program radi?

Softverski dodatak temelji se na jQuery (zašto?) i varijablama koje je razvio Brandon Aaron, a koje su sada uključene u jQuery označavanje. Navedite ih u naslovu:

$("img").lazyload();

Nakon toga, sve slike će se učitavati kako im korisnik pristupa.

Responzivna instalacija

Program ima opcije za pedante koji žele osobno pratiti svaki detalj. Možete postaviti prag otvaranja slike - prema zadanim postavkama ta je vrijednost 0, odnosno slika se otvara samo kada se pojavi na stranici.

$("img").lazyload(( prag: 200 ));

Ako postavite vrijednost praga na 200, tada će prije otvaranja 200 piksela slike već biti učitano.

Rezervirano mjesto za sliku

Također možete postaviti rezervirano mjesto za sliku i događaj za početak učitavanja. Rezervirano mjesto mora sadržavati adresu slike. Softverski modul nudi prozirne, sive i bijele slike veličine 1*1 piksela.

$("img").lazyload(( rezervirano mjesto: "img/grey.gif" ));

Događaj za početak učitavanja

Događaj je postavljen u jQueryju - može biti bilo što, uključujući klik ili pokret miša. Možete razviti vlastite mogućnosti. Prema zadanim postavkama, program čeka dok se korisnik ne pomakne prema dolje na stranici - tada se slike pojavljuju u prozoru preglednika. Kako biste spriječili učitavanje slika dok korisnik ne klikne rezervirano mjesto, učinite sljedeće:

$("img").lazyload((
rezervirano mjesto: "img/grey.gif",
događaj: "klik"
});

Korištenje efekata

Prema zadanim postavkama, dodatak čeka da se slika potpuno učita i zatim poziva funkciju show() da je prikaže. Ovom slijedu radnji možete dodati bilo koji efekt koji želite. Isječak koda u nastavku pokazuje kako dodati učinak blijeđenja. Na demo stranici možete vidjeti kako to izgleda.

$("img").lazyload((
rezervirano mjesto: "img/grey.gif",
učinak: "fadeIn"
});

Interna pohrana slika

Također možete koristiti dodatak za slike pohranjene unutar spremnika koji se mogu pomicati - da biste to učinili, jednostavno navedite spremnik u kodu kao jQuery objekt. Postoje demo opcije za vodoravne i okomite spremnike.

#container (visina: 600px; overflow: scroll; ) $("img").lazyload(( rezervirano mjesto: "img/grey.gif", spremnik: $("#container")
});

Ako se slike prikazuju nepravilnim redoslijedom

Nakon listanja stranice, program počinje tražiti neučitane slike, provjeravajući tijekom pretraživanja je li slika postala vidljiva. Prema zadanim postavkama, pretraga se zaustavlja kada se pronađe prva vidljiva slika - pretpostavlja se da je redoslijed slika na stranici isti kao u html kodu. Međutim, s nekim opcijama označavanja to nije sasvim slučaj - u ovom slučaju trebali biste koristiti funkciju failurelimit, koja regulira redoslijed prikazivanja slika.

$("img").lazyload(( ograničenje greške: 10
});

Ako vrijednost funkcije postavimo na 10, program prestaje tražiti nakon što pronađe 10 vidljivih slika. Ako stranica ima složen izgled, ovdje biste trebali unijeti prilično velik broj.

Možete organizirati lijeno učitavanje slika, iako to nije uključeno u glavnu funkcionalnost programa. Ako dodate kod u nastavku, program će pričekati da se stranica u potpunosti učita, ne samo njezini html elementi, već i slike. Pet sekundi nakon završetka preuzimanja automatski će se preuzeti i nevidljive slike. Možete provjeriti demo verziju.

$(function() ( $("img:below-the-fold")).lazyload(( rezervirano mjesto: "img/grey.gif", događaj: "sportski"
});
});
$(window).bind("load", function() ( var timeout = setTimeout(function() ($("img").trigger("sporty")), 5000); ));

To je sve za danas! Hvala vam na pažnji.

Prilikom pregledavanja interneta svi žele da se stranice web stranica učitavaju što je brže moguće; nitko ne voli dugo čekati da se određena stranica učita. Štoviše, ovo se čekanje može značajno odgoditi u slučajevima kada na stranici ima mnogo slika. Prisutnost slika na stranici čini stranicu privlačnijom posjetiteljima, povećava vidljivost i u konačnici pomaže povećati promet na vašoj stranici. Međutim, moramo uzeti u obzir činjenicu da prisutnost slika značajno otežava stranice, povećavajući vrijeme njihovog učitavanja.

Sporo učitavanje stranica negativno utječe na SEO optimizaciju vaše web stranice. Danas mnoge web stranice koriste GIF ili slike u svojim postovima. PNG format. Te su slike veće od JPEG slika i kao rezultat stranicama može trebati još više vremena da se učitaju. Za preuzimanje svake takve slike potreban je poseban HTTP zahtjev, što također ne ubrzava preuzimanje.

Za rješavanje ovog problema koristi se takozvano “lijeno” ili odgođeno učitavanje u kojem se učitavaju samo one slike koje su korisniku potrebne. Ovaj članak opisuje šest najboljih besplatnih dodataka za lijeno učitavanje WordPressa koji mogu značajno poboljšati brzinu učitavanja stranice.

1. a3 Lazy Load - najbolji dodatak za odgođeno učitavanje

Dodatak ubrzava vaš blog i poboljšava vizualni odziv stranice na računalima, tabletima i mobilnim telefonima.

a3 Lazy Load ne stvara opterećenje na stranici i prilagođen je mobilnim uređajima. Dodatak jednostavan za korištenje koji će ubrzati vašu web stranicu. Što više težih elemenata vaša stranica ima, to će dodatak bolje obavljati svoj posao i vidjet ćete više poboljšanja performansi.

Lijeno učitavanje za sve slike, gravatare, videozapise i okvire
Odabir efekata učitavanja
WooCommerce podrška
Visoke performanse i malo opterećenje
Možete isključiti slike i videozapise
Sigurnosna JavaScript veza
Podržava sve preglednike

2. Lijeno opterećenje

Ovo je dodatak za lijeno učitavanje slika koji su razvili WordPress.com, TechCrunch tim i Jack Goldman. Ima jednostavan kod, tako da ne opterećuje resurse poslužitelja.

Lazy je dodatak koji se lako instalira i konfigurira. Ne zahtijeva praktički nikakvo postavljanje, počinje s radom odmah nakon instalacije.