v1.6-v1.7 Lazy loading module V1.0.2

Coolt

Well-known member
Diamond
Elite
XNullUser
Joined
Dec 20, 2021
Messages
329
Reaction score
259
Points
63
NullCash
2,815
- This module is used to lazy load product images.
- Compatible with all themes of Prestashop 1.6 and Prestashop1.7
- It helps dramatically to improve website pages loading and it reduces your bounce rate.
Result:
Good website experience and SEO improvement.

----------------------------------------------------

Installation on Prestashop 1.7​

  1. Download the module, install it from BO > Modules page.
  2. Edit the \themes\yourtheme\templates\catalog\_partials\miniatures\product.tpl file.
1
2
">
<img src = "{$product.cover.bySize.home_default.url}"
By this one:

1
2
3
is_stlazyloading">
<img src="{$stlazyloading.img_prod_url}{$stlazyloading.lang_iso_code}-default-home_default.jpg" class="stlazyloading_holder" width="{$product.cover.bySize.home_default.width}" height="{$product.cover.bySize.home_default.height}" alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}" />
<img data-src = "{$product.cover.bySize.home_default.url}" class="stlazyloadthis"




Installation on Prestashop 1.6​

  1. Download the module, install it from BO > Modules page.
  2. Edit the \themes\yourtheme\product-list.tpl file.
    1is_stlazyloading
    1<img src="{$img_prod_dir}{$lang_iso}-default-home_default.jpg" class="stlazyloading_holder" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
    1stlazyloadthis
    1data-
  3. Add this code to the bottom part of the reloadContent function in the \themes\yourtheme\js\modules\blocklayered\blocklayered.js file.
    1
    2
    if (typeof(stlazyloading) == 'function')
    stlazyloading($('img.stlazyloadthis'));

Troubleshot​

If you get a message like this "en-default-home_default.jpg can not be load".
Regenerating home_default image type thumbnails for products can fix the problem.
 

Attachments

  • stlazyloading-7.zip
    14.4 KB · Views: 1

Coolt

Well-known member
Diamond
Elite
XNullUser
Joined
Dec 20, 2021
Messages
329
Reaction score
259
Points
63
NullCash
2,815
Yes, but it's not free for free!! It's free for testing purposes. Be sure that it will be deleted from the website owner after some months, and it will be a paid module. This is the system of pretashop developpers in general.
So the correct method is to upload the file here.
 

momidit521

Member
XNullUser
Joined
Apr 20, 2021
Messages
145
Reaction score
4
Points
18
NullCash
3
wow!!! grazie
 

amir_561

Well-known member
Diamond
Elite
XNullUser
Joined
Aug 20, 2019
Messages
1,801
Reaction score
141
Points
63
NullCash
1
thanx
 

x50902Ty

Active member
Elite
XNullUser
Joined
Mar 21, 2021
Messages
900
Reaction score
177
Points
43
NullCash
209
i think it is not work in most theme ,because lazy js was not support by it.jquery have problem.
 

Coolt

Well-known member
Diamond
Elite
XNullUser
Joined
Dec 20, 2021
Messages
329
Reaction score
259
Points
63
NullCash
2,815
It works fine i tested it with 3 themes.
 

Coolt

Well-known member
Diamond
Elite
XNullUser
Joined
Dec 20, 2021
Messages
329
Reaction score
259
Points
63
NullCash
2,815
After installation you must put codes in the correct files listed in the 1st comment.
 

vass4ov82

Member
XNullUser
Joined
Sep 29, 2021
Messages
199
Reaction score
1
Points
18
NullCash
0
Works on 1.7.8 .. with some awkward space between all product-tab modules.
Yes, but it's not free for free!! It's free for testing purposes. Be sure that it will be deleted from the website owner after some months, and it will be a paid module. This is the system of pretashop developpers in general.
So the correct method is to upload the file here.
All you need to use the module is already on your server - php, css and two js files
 
Top