Image Lazy Loader for the product listing page

This was suggested in another forum post: http://www.zen-cart.com/showthread.php?190816-Jquery-Lazy-load-plugin

I have put it all together for a plugin and am waiting for review. I will post the link once it is approved but if you want it before then, let me know and I'll get it to you.

"This plugin only loads images that are in a visible part of web page, which is very useful for stores that show a lot of products per page. You can check it out on my store - http://www.klybni4ka.net/vypusknye-platya-c-140. If you dont notice it, try to scroll really fast to the bottom. " Thanks to Dan123 for his explanation and code!

Directions:
Change the your custom template folder names to your custom name.
Upload all files.

---

More jQuery Information:
This package does include the most recent version of jQuery on this date - 1.11.1.
If you already are using jQuery, that file is not necessary to upload. But, and this is a very big but,
if this does not work, then the version of jQuery you have installed may be the problem.
Replacing your present version of jQuery core with this one would solve that problem but can result in
your old jQuery mods not working. I prefer to upload the jQuery core file that I know works instead of pulling
the most recent from the depository since subsequent versions can disable this particular plugin.

---

Cart Modified Files:
includes/modules/your custom template / product_listing.php
Cart New Files:
includes/functions/extra_functions/lazy_loader_extra_function.php
includes/templates/your custom template/jscript/jscript_jquery1.11.1.js
includes/templates/your custom template/jscript/jscript_lazy_loader_function_start.js
includes/templates/your custom template/jscript/jscript_lazyload_plugin.js

---

CSS style tips:

Add this to your stylesheet:
.listingProductImage{display: none}
img.listingProductImage1

I'm interested in making sure my site loads as quickly as possible on mobile devices and this is something I was planning on working on.

If this works as I expect, you've both saved me from having to code something like this myself. Thanks Dan123 & Delia!

Perchance, have you tested this module to see how much it saves in site load time (mobile specific)?

If not, no need to bother as I will test it myself. If you don't mind, I'd like a copy as soon as you are able. :smile:

No actually I've not done any testing and I don't even know if it's testable since it's not about page load but about only loading elements on the page. Are you using image handler? That's the best way to speed up image loading for all category and products images. The two do work together as well.

Enzo:

I'm interested in making sure my site loads as quickly as possible on mobile devices and this is something I was planning on working on.
......
Perchance, have you tested this module to see how much it saves in site load time (mobile specific)?

I, for one, would be very interested in seeing an improvement in loading speed for mobile devices.

delia:

No actually I've not done any testing and I don't even know if it's testable since it's not about page load but about only loading elements on the page. Are you using image handler? That's the best way to speed up image loading for all category and products images. The two do work together as well.

Anything extra to load slows down a site's loading speed - elements, images, DB calls etc

Looking forward to a copy of this plugin - thanks a zillion in advance.

Cheers / Frank

delia:

the most recent from the depository since subsequent versions can disable this particular plugin.
FYI, loading jQuery Migrate along with the jQuery script can mitigate these kinds of issues.. it's not an end all be all, but it will plug the gap in many cases..

delete

I think this is more of a Zen Cart core issue.. Will report back and cross reference my post as I discovered the issue after installing this module..

Found a few issues getting this to work with Zen Cart v1.5.4

Issue 1
There is shortcode PHP in the included functions file which will error out on many server configurations.. changing the opening ```

<? ```to ``` <?php ``` resolves this **Issue 2** The v1.5.4 codebase now includes a jQuery loader which intelligently checks for jQuery being loaded from a local file, and if none is detected, it will load jQuery from a CDN with a fallback to a local file that is in the default template.. It is unnecessary for anyone installing this module to upload the jQuery local file included with this module, though if you decide to for one reason or another, this will not be an issue. I prefer the native CDN loader, and did not upload the jQuery file included in this module.. This is when I ran into the next issue **Issue 3** the included jQuery scripts fail to execute correctly as they load before jQuery loads.. This is because of the way one must work with the new jQuery structure > **rbarbour:** > > In v154 jQuery is being called after the load for all site-wide jscript_*.js files located within the custom templates folder. > **rbarbour:** > > This means all site-wide jscript_*.js files will have to be called from page-specific jscript_*.js or site-wide jscript_*.php files. <http://www.zen-cart.com/showthread.php?216270-Not-a-bug-**-CDN-for-jQuery-core-**> I made a number of changes to support the new structure.. With Delia's blessing I'll be happy to package it up and share it.. or alternately Delia, if you have a Github repo for this module, I'll gladly submit a pull request so you can review the changes I made..:smile:

Dang, girl! Super stuff. I don't have a github repo but maybe it's time to start.

Anything you do would be greatly appreciated. I simply grabbed that from a post for someone who wanted it and spent very little time with it. So yup I missed a lot of nuances!

delia:

Dang, girl! Super stuff. I don't have a github repo but maybe it's time to start.

Anything you do would be greatly appreciated. I simply grabbed that from a post for someone who wanted it and spent very little time with it. So yup I missed a lot of nuances!

What you did was awesome.. I didn't want to step on toes which is why I wanted to check in with the queen (dat be you!:laugh:) before I just did stuff all willy nilly..

And yes you DO need to create a Github repo missy!!:laugh: If you decide to create a Github repo for this module, I can fork it and create a pull request for you to review my changes, or if you're okay with it, I can simply package and submit the changes..

Would be nice if this little gem could work on the centerboxes as well.. I tried to apply similar changes to the centerbox module files, and got the spinning icon, but no image load.. :blink:

DivaVocals:

What you did was awesome.. I didn't want to step on toes which is why I wanted to check in with the queen (dat be you!:laugh:) before I just did stuff all willy nilly..

And yes you DO need to create a Github repo missy!!:laugh: If you decide to create a Github repo for this module, I can fork it and create a pull request for you to review my changes, or if you're okay with it, I can simply package and submit the changes..

Would be nice if this little gem could work on the centerboxes as well.. I tried to apply similar changes to the centerbox module files, and got the spinning icon, but no image load.. :blink:

Did you ever get this package up yet with the fixes diva?

countrycharm:

Did you ever get this package up yet with the fixes diva?

Nope.. been swamped.. sorry..

DivaVocals:

Nope.. been swamped.. sorry..

Quite understandable:D

countrycharm:

Quite understandable:D

If Delia creates a Github repo for this I can submit it as a fork and pull request..

countrycharm:

Did you ever get this package up yet with the fixes diva?

DivaVocals:

If Delia creates a Github repo for this I can submit it as a fork and pull request..

Created a Github repo with my changes.. https://github.com/DivaVocals/zen_ZenCartLazyLoader

well, dang I saw the first post and didn't see the second but really that was all the files anyway Diva. Now that I have successfully done the first one, I set up the other one we were talking about.

delia:

well, dang I saw the first post and didn't see the second but really that was all the files anyway Diva. Now that I have successfully done the first one, I set up the other one we were talking about.

You have a Githubrepo now??? If you do, gimme the link and I'll submit a pull request with my updates.. :smile:

ha, deleted it when I saw you had put one up for that. I have no files beyond what is in the download package.

delia:

ha, deleted it when I saw you had put one up for that. I have no files beyond what is in the download package.

Don't delete it.. I was gonna submit a pull request to your Github repo so you could review my updates, and if you agree/approve you can accept my pull request and then submit the updates.. (that's how folks submit updates to the modules I have been maintaining that I've put up on Github)

Done - https://github.com/wiztechinc/zc-lazy-loader