Lazy Loading Images & Ajax Scroll

Most of ecommerce website use a lot of images for products. If we don’t have a solution to improve website performance, the website is very slow because of loading images at the same time. An old solution but is effective, “Load images when need”. Images or products will display on screen if customer want to show more.

“Lazy load & Ajax scroll”  made by X-MAGE2. This extension implemented above solution for magento 2, it’s easy to use for the administrator and easy to customize for developer.

Extension’s features include:

  • Manage “ajax scroll” for category product list
  • Manage “lazy loading images” for product in whole website.
  • Enable or disable load more button.
  • Manage back to top button.

ajaxscroll_1First part of configuration section is ajaxscroll general settings. User can :

  • Enable/disable this features
  • Upload a image .gif to display when next product page is loading.
  • Define a text below loading bar image.

ajaxscroll_2

Next part is advanced setting for ajaxscroll feature. Users can:

  • Apply this feature to what pages they want.
  • Some technical parameters, if you are using a customized theme which customized some phtml template, change some css classes. These parameters are very useful, user don’t need to change code to adapt this extension.

backto_top

Third part is configuration for backtotop button, user can:

  • Enable/Disable feature for whole website.
  • Use image or text only.

if user want to use image, he can upload image, if user want to use text only, he can change text.

lazy_load

Lazy load configuration is very simple: enable, disable, upload a loading image, define css classes to identify what object is applied.

loadmore_items

Last part is loading more button, this configuration allows user control how many product pages will be load automatically, after that, a “load more items” button appears with user-defined color and text.

To create some images .gif, you can use this website and select what image you want: Preloader. Change color, size and generate image. For developers who want to improve performance more with this extension and customized theme, this is a trick:

  • Open image_with_borders.phtml
  • Remove a line of code where check “lazy loading images” feature is enabled.

If this extension is useful for you. You want to buy it. Please visit our official website.

[otw_shortcode_button href=”http://x-mage2.com/lazy-load-ajax-scroll.html” size=”medium” icon_type=”general foundicon-star” icon_position=”left” shape=”radius” color_class=”otw-orange” target=”_blank”]BUY THIS EXTENSION[/otw_shortcode_button]

[otw_shortcode_button href=”http://x-mage2.com/lazy-load-ajax-scroll.html” size=”medium” icon_type=”general foundicon-star” icon_position=”left” shape=”radius” color_class=”otw-orange” target=”_blank”]REVIEW THIS EXTENSION[/otw_shortcode_button]

Leave a Reply

Your email address will not be published. Required fields are marked *