Free PrestaShop lazy loading module for product images
This module is used to lazy load product images.
Compatible with: Prestashop 1.6 and Prestashop1.7
Download
Free PrestaShop lazy loading module (122898 downloads)NOTE if you are using the Transformer theme or Panda theme, then no need to use this module, the lazy loading feature is one of our theme's built-in features. This module is for people how are using PrestaShop themes which do not have a lazy loading feature.
Key features on PrestaShop 1.7
- Works for New products block module , Top-sellers block module and Featured products module on homepage.
- Works for product listing pages.
- Works for Cross-selling module and Products in the same category module on the product page.
- This module works fine with the prestashop's native Faceted search. Product images will be lazy loaded after filtering.
- Product images will be lazy loaded after going to the next page.
- Compatible with PrestaShop 1.7.
- Just need to edit one file.
Key features on PrestaShop 1.6
- Works for product listing pages.
- This module works fine with the prestashop's Layered navigation block module. Product images will be lazy loaded after filtering.
- Product images will be lazy loaded after going to next pagination.
- Compatible with PrestaShop 1.6.
Screenshots
Installation on Prestashop 1.7
- Download the module, install it from BO > Modules page.
- 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
- Download the module, install it from BO > Modules page.
- Edit the \themes\yourtheme\product-list.tpl file.1is_stlazyloading1<img src="{$img_prod_dir}{$lang_iso}-default-home_default.jpg" class="stlazyloading_holder" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />1stlazyloadthis1data-
- Add this code to the bottom part of the reloadContent function in the \themes\yourtheme\js\modules\blocklayered\blocklayered.js file.1
2if (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.
Changelog
V1.0.2 - (May 20, 2019)
Fixed a problem of the lazy loading feature not working along with the Grid/List switcher.
V1.0.1 - (Oct 29, 2018)
Added compatibility with PrestaShop 1.6.
V1.0.0 - (Oct 11, 2018)
Fixed a compatibility issue with IE.
V1.0.0 - (Dec 9, 2017)
Initial release.
Which version of theme editor is needed? I have transformer theme and prestashop 1.6 and i don't see any option for lazy loading images.
The option was added in Transformer theme 3.4.0
I originally bought transformer theme in envato, now there has been removed and can't download anything. How can i get current version?
Check this https://www.sunnytoo.com/9364/get-updates-transformer-theme-panda-theme-bought-themeforest
Since it's already too long, we are unable to verify the purchase code you got on envato anymore, if you can provide something else which can approve you did the purchase, please send to helloleemj@gmail.com
I sent by email the requested info, please check.
Doesn't work on the standard PrestaShop 1.6 template
https://i.imgur.com/cv4f6gR.png
If you are using the default homepage layout to display products in a tab, then the lazyloading feature can't work therer. Because the lazyloading feature works by asking images where their positions are on the page, but images under the tab have no positions, they are all initially hidden. PrestaShop 1.6 uses an old version of bootstrap for the tab, which makes us unable to control the tab to force the lazyloading feature to be applied to the tab.
Hello I have a problem with the module, it works perfectly in the main, but when you hit a category do not leave the images You could help me please. bye
I noticed that if I hit any filter or page 2 if the images load. I have tried to force compilation, disable all cache options and nothing, the web is https://carmenarjona.com/
and when you go to any category of web you will see that they do not load the images
I had a look of your site, I didn't find anything unusual. If you need our help to check, send us your back office and ftp login details to helloleemj@gmail.com
It could be used in custom html images on homepage?
Which theme your are using, if you are using one of our themes, then check #35 on this page, that's how to lazy load images in the custom html https://www.sunnytoo.com/14367/small-customizations-transformer-theme-panda-theme-make-better
Hi Jonny
I have PrestShop 1.7.5.0 nad module is not working 🙁
can you help me ?
its code
{block name='product_miniature_item'}
{block name='product_thumbnail'}
{hook h="displayCzHoverImage" id_product=$product.id_product home='home_default' large='large_default'}
{/block}
You are using a custom theme, contact your theme developers to ask for help. If can take a look for you if you want, send me your FTP access to helloleemj@gmail.com
Hello,
Thanks for this free module.
I use PS v1.6.1.24 but "lazy loading module" does not work on the home page but is OK on the category pages.
I try to disable cache and force smarty to compile templates but it does nothing.
Changes are made on my "local" dev server. so, no access from Internet.
Any idea about this problem ?
Regards
Then you probably use the default homepage of 1.6, which displays products in a tab, to add lazyloading feature to the tab requires to edit some theme files, which isn't what the module can do. If you choose to display products in the displayHome hook, not using the tab, then the lazyloading module can work fine.
You're right. I use the default 1.6 home page.
I'm going to find out if it's possible to add your module into these products tab...
Thanks again for all.
Hi, about the issue me and other people having with this module in safari browser, I think it's a bug, even your demostore load image properly in safari.
Thanks for your reporting, I will check it tomorrow to see what's wrong.
Could you please send me some screenshots to show me how to reproduce it, I tried on my iPad, but I din't find the problem. My email address is helloleemj@gmail.com
Hello,
It doesn't work in prestashop 1.7.5.2, here is my code, is there something wrong in it ?
{if $product.cover}
{if isset($cfg_product_one_img) && $cfg_product_one_img}
{/if}
{else}
Do something like this https://www.sunnytoo.com/wp-content/uploads/screenshot/Screenshot01591.jpg
You are using a custom theme, you can contact its developers for help of applying the lazyloading feature. If you need our help, send us the product.tpl file via email.
Hello Jonny,
I just installed your module on a shop v1.7.6.0
It works perfectly on computer but the images do not load by smartphone version ...
You would know where the problem comes from?
Which theme you are using? Does it have retina feature? Did you clear your browser cache? Send your site url to helloleemj@gmail.com so I can take a look and give you an accurate answer.
Hello,
And thank you for your answer.
I use a theme called SEOPresta.
The retina option is not checked in my image preferences.
I cleared my cache and tested the site on different platform.
I send you the url by mail.
Thank you.
Hi Jonny,
Thanks for making this module.
The module works well in chrome, while I have problems with safari, I don't upload images. Any solution?
Sounds like a browser cache related issue. If the module can work fine in chrome, then it can work fine with Safari, because it doesn't have compatibility issues.
Another possible reason is that there is a browser compatibility issue on your site, which is caused by another module, the issue stops the lazy loading module from working.
Hi I have the same issue on safari , it load only the first line then none is display. I use presta 1.6 default theme, How can I check for a compatibily issue?
As far i remember it used to work on safari some months ago.
Hi,
this is my themes current code;
regards,
Hi,
how can i apply changes in this code;
{assign var="pages_cart" value=Context::getContext()->link->getPageLink('cart')}
i cant seem to be able to copy the code
What do you want to do? You can write an email to me helloleemj@gmail.com or you can post on our support forums.
it is not work on prestashop 1.6 because not load image product in theme panda
If you are using Panda theme, then no need to use this module, because panda theme has lazy loading feature built-in.
Firstly i said thank you, module its okey but only one problem, new product block cant load picture
Sorry new product block is fine, featured product dont load images ps 1.7 i tried regenareted home_default, clasic theme tpl still nothing i use modez theme can you help me ?
I guess products in the "featured product" module are displayed in a slider, that's probably why this lazy loading module not working for them.
This module can't work with product slider modules. You need to ask the developers of your theme to add lazy-loading and lazy-loading-offscreen features to product slider modules.
Hi , thanks for this module. It working well for product list with prestashop 1.6, but i'm not able to lazy load images in product page. Can you give us some tips to let it work on product page too?
Thanks
Do you want to lazy load images on the main image gallery section? To lazy load them requires a lot of changes to the product.js file, too many changes to be listed out as a guide, so hire someone to add the feature for you.
Hi,
I am using the lady loading module and edit the product.tpl file exactly how you suggested. But I am having a problem. Images are displaying with a no-image available display.
Please open this link :
https://www.dropbox.com/s/6jhyayzy8tpolhf/Screenshot%20from%202019-06-20%2014-48-02.png?dl=0
Don't know what is happening. Please help us.
Thanks
Try disabling CCC for css, if that works, then there is a css syntax error somewhere which stopped some css from working.
First, I would like to thank you for this module. It's the best one available online.
Have a question. Why the number of requests I see in chrome network are the same as with the module disabled? Even the module was successfully installed and I see the images beautifully loading, one by one, once I'm scrolling, the website is still sending the same http requests for all the product images in category. I see this happen also in the demo. For example please check your demo here: https://sunnytoo.net/ps17/women/
as you can see there are http requests for all the product images on that page (even they are loading while scrolling). Am I missing something? This is also what happen with my category page. I'm using Prestahop 1.6
Thanks!
That's a problem of the demo site, not the Free Prestashop lazy loading module, the module can works perfectly fine.
I've fixed the problem on the demo site, check it again.
I guess you probably did a similar mistake, please check your modification to the \themes\yourtheme\product-list.tpl file.
I you need me to take a look, send your site url to helloleemj@gmail.com
Hi, on Presta 1.6.1.23 module works very well, thanks. But I've noticed on product-list pagewhen user switch between Grid / List mode, the module don't load image until page is reloaded. Do you have any advice about it?
Thanks for reporting the problem, I just released a new version to fix it.
Upgrade your lazy loading module, and then clear the smarty cache and browser cache to check.
Thanks, I'll check the update.
fix works perfectly, thanks so much.
Hello Jonny,
Thank you so much for the GREAT module, it's working fine, but when I use CloudFront media server, it doesn't work, it is working fine without using any media server.
Could you please help? Any help would be greatly appreciated.
Thanks again.
Kind Regard
Zameer
Using CloudFront won't stop this module working, send your site url to helloleemj@gmail.com so I can see what's wrong.
Hi,
Thanks for this module.
I am on PS 1.6 and the module works well excepted ... on the Home Page.
Do you know where the problem comes from ?
Brgds,
Nicolas
Are you using the Default theme displaying products in a tab on the homepage, it's very tricky to add lazyload feature to the tab.
Hi Jonny,
Yes I'm using Default Theme.
If I understand what you mean, we should desactivate a Addons on our Home Page ?
Which one please ?
Brgds,
Nicolas
Hey,
Module is working fine until blocklayerd is in the game. Product picture doesn't load.
I'm using prestashop 1.6.1
Best regards,
You probably forgot to do #3 to add a piece of code to the \themes\yourtheme\js\modules\blocklayered\blocklayered.js file.
I did. The problem is with some of the filters usually ones which don't update url or when you disable filter
Send your site url to helloleemj@gmail.com so I can take a look.
Hello,
Thank you for your module!
But I have a problem it doesn't work in 1.7.5, I checked several times if I didn't make mistakes.
It's a real shame because he looked really TOP.
Do you think you can help me? I don't get any error messages.
Send your site url to helloleemj@gmail.com so I can take a look.
Thank you very much it's done!
Hi, I installed and configurated your module but I got an error in front end. The images are not loaded and show text is_stlazyloading">nameproduct. Any solution?
You probably made a mistake, double check your modifications.
You are right jonny, I made a mistake. Now all seems to work fine, I will test the web speed in the future to see the changes. Thanks
Can't seem to add it to product-slider.tpl that is needed for some modules on the homepage. Could you please help ?
No need, products slider modules have lazyload feature by default.
Hi,
Thanks for making this module. And makeing it work on thirtybees and ps 1.6.xx
The only thing that "bothers me" that if half the image is shown on the page the image is not loaded. You have to scroll down to enable the image. This also happens on the demo. Question is can we manually tell the module at what percentage the image starts loading?
found that changing to {offset: '150%'}); }); does the trick. Am I right ?
Yes, you are right.
Hi, same problem here.
Where to put your solution?
can you paste the full code here?
thanks
d.
p.s. ver 1.6
Hi, same problem here.
Where to put your solution?
can you paste the full code here?
thanks
d.
You can find that code in the \modules\stlazyloading\views\js\stlazyloading.js file. If you are running on PrestaShop 1.6, then the file you need to edit is \modules\stlazyloading\views\js\stlazyloading16.js.
Is seems work! fantastic thanks 🙂
Another problem with another module i notice if i set lazyload.
When you make a selection on filters (advanced search 4) images doesn't load anymore.
If you want i can send you link access via email or skype.
thanks in advance
d.
You need to add this code to the \modules\pm_advancedsearch4\views\js\as4_plugin.js file.
if (typeof(stlazyloading) == 'function')
stlazyloading($('img.stlazyloadthis'));
You can find a screenshot showing where that code should be placed on this post How to integrate the Advanced Search 4 Module work with Transformer theme and Panda theme
fantastic ... idol!
🙂
last question Jonny, if you can help me.
Can i apply lazyload to all other images? (banner, slider, category)
thannks in advance
d.
To apply lazyload to banners and categories requires some amount of custom work which I can't provide. Speaking of sliders, they are supposed to have lazyload feature by default.
Hi, thanks for module, i have a problem in CMS pages, prestashop deletes the second image (data-src). I am use transformer theme in presta1.6
I need more information to know what's the problem, please explain it in details. What did you mean "Deletes"?
Hello Jonny, we have implemented in the template of the list of products without problem. Now we want to implement it in the images of the CMS and others.
I try to put the substitution code in the CMS text itself but prestashop deletes the second image, that of the "data-src" attribute.
I hope to have explained, a greeting
You can customize the module to lazy load images everywhere.
Speaking of the data-src got removed problem, you can turn off the "Use HTMLPurifier Library" option on the Preferences>Genera page to fix it.
hi, i have panda theme for ps 1.6. do i need to use this module? or panda 2 have this module only?
This module is compatible with both 1.6 and 1.7.
Hello, I tested your module on PS1.7 but I have a problem, that i think could be caused by an incompatibility with this module: https://addons.prestashop.com/it/ricerche-filtri/18575-amazzing-filter.html
Lazy load infact works only on first page, while if you open page 2, 3, 4... of any category, no product images are showed.
I have a test website where everything it's installed there, if you want i can give you access but i need ip because it's on maintenance mode.
Replied to you via email.
Hi,
I have the same problem with module amazzing-filter.
Can you help me, please?
@Info219 What's the version of your prestashop? Search for this code prestashop.emit('updateProductList'); in the /modules/amazzingfilter/views/js/front.js file, if there are two // right before the code?
Try adding the code showing in #3 for PrestaShop1.6 to right below it.
Hi Jonny,
thanks, it works perfectly.
Can this work on 1.6 and transformer 3.xx?
I guess this is not that difficult to port is it?
No, it can't work on 1.6. It's for 1.7 only.