Joomla VirtueMart: inštalácia a konfigurácia internetového obchodu. Lazy Load - lenivé načítanie fotografií produktov Pridanie jednoduchého produktu

Existuje niekoľko spôsobov, ako zvýšiť rýchlosť načítania stránky:

  • ukladanie do vyrovnávacej pamäte
  • kompresia css a js súborov
  • optimalizácia obrazu

V tomto článku podrobne rozoberieme posledný bod a ukážeme, aké výsledky možno dosiahnuť.

Pri použití lenivého načítania (lenivého načítania) pre obrázky sa hmotnosť stránky zníži, takže sa stránka začne načítavať rýchlejšie.

Princíp fungovania je jednoduchý – obrázky sa dynamicky načítavajú hneď, ako sa dostanú do oblasti viditeľnosti používateľa. Prehliadač napríklad nemusí okamžite stiahnuť všetky fotografie produktov z kategórie, stačí stiahnuť a zobraziť obrázky niekoľkých produktov, ktoré spadajú na prvú obrazovku. Ak stránka zobrazuje veľa produktov, výrazne to urýchli sťahovanie.

Existujú 2 spôsoby, ako integrovať lenivé zaťaženie do virtuemart:

  • manuálne vykonaním niektorých zmien v šablóne
  • pomocou doplnku, ktorý vám umožní dokončiť lenivé načítanie pre všetky obrázky na stránke

Ručné pridanie lenivého zaťaženia

Existuje mnoho skriptov, ktoré možno použiť na integráciu lenivého načítania do lokality. Používam echo.js. Komprimovaná verzia skriptu váži iba 2 KB. Príklad práce si môžete pozrieť na tejto stránke.

Pripojte skript na stránke kategórie. Na iných stránkach si myslím, že nemá veľký zmysel používať lenivé načítavanie. Ak potrebujete pridať lenivé zaťaženie pre všetky obrázky stránok, potom je lepšie použiť doplnok LLFJ - Lazy Load pre Joomla!, o ktorom bude reč v ďalšej časti.

Skopírujte teda súbory skriptov do priečinka šablón /templates/template_name/echo/ .

Nahraďte výstupný kód obrázka v kategórii.

Pre virtuemart 3

V súbore /components/com_siteblayouts/products.php nahradiť

< a title = "(!LANG: názov_produktu ?>" !} href=" odkaz. $ItemidStr ; ?>">

echo $product -> images[ 0 ] ->

< / a >

Pre virtuemart 2

V súbore nahraďte

< a title = "(!LANG: názov_produktu ?>" !} href=" odkaz ; ?>">

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

< / a >

Na úplný koniec súboru pridajte volanie skriptu /components/com_virtuemart/views/category/tmpl/default.php(pre všetky verzie vm).

$document = JFactory::getDocument();

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

Prečítajte si tiež