Lazy Load - lijeno učitavanje slika za virtuemart. Lazy Load - lijeno učitavanje fotografija proizvoda Dugo očekivani uvoz datoteka u prodavnicu

Postoji nekoliko načina za povećanje brzine učitavanja stranice:

  • keširanje
  • kompresiju css i js datoteka
  • optimizacija slike

U ovom članku ćemo detaljno analizirati posljednju tačku i pokazati koji se rezultati mogu postići.

Kada koristite odloženo učitavanje (lijeno učitavanje) za slike, težina stranice postaje manja, tako da stranica počinje brže da se učitava.

Princip rada je jednostavan - slike se dinamički učitavaju čim uđu u vidljivo područje korisnika. Na primjer, pretraživač ne mora odmah preuzeti sve fotografije proizvoda iz kategorije, dovoljno je preuzeti i prikazati slike za nekoliko proizvoda koje padaju na prvi ekran. Ako stranica prikazuje puno proizvoda, to će značajno ubrzati preuzimanje.

Postoje 2 načina da integrišete lijeno opterećenje u virtuemart:

  • ručno unošenjem nekih izmjena u šablonu
  • korištenjem dodatka koji će vam omogućiti da završite lijeno učitavanje za sve slike na stranici

Ručno dodavanje lijenog opterećenja

Postoji mnogo skripti koje se mogu koristiti za integraciju lijenog opterećenja u web stranicu. Koristim echo.js. Komprimirana verzija skripte teži samo 2 KB. Primjer rada možete vidjeti na ovoj stranici.

Povežite skriptu na stranici kategorije. Na drugim stranicama, mislim da nema puno smisla koristiti odloženo učitavanje. Ako trebate dodati "lijeno opterećenje" za sve slike web mjesta, onda je bolje koristiti dodatak LLFJ - Lazy Load za Joomla!, o čemu će biti riječi u sljedećem odjeljku.

Dakle, kopirajte fajlove skripte u folder šablona /templates/template_name/echo/ .

Zamijenimo izlazni kod slike u kategoriji.

Za virtuemart 3

U fajlu /components/com_siteblayouts/products.php zamijeniti

< a title = "(!LANG: naziv_proizvoda ?>" !} href=" veza. $ItemidStr ; ?>">

echo $product -> slike[ 0 ] ->

< / a >

Za virtuemart 2

U datoteci zamijenite

< a title = "(!LANG: naziv_proizvoda ?>" !} href=" veza ; ?>">

echo $product -> slike [ 0 ] -> displayMediaThumb ("class="browseProductImage"" , false ) ;

< / a >

Dodajte poziv skripte na sam kraj datoteke /components/com_virtuemart/views/category/tmpl/default.php(za sve vm verzije).

$document = JFactory::getDocument();

$document -> addScript( "/templates/template_name/echo/echo.min.js") ;

Pročitajte također