Over 200 add-ons available under a single subscription for $40 per month!

Images lazy load

Increases the speed of loading pages of the site, reduces the consumption of user resources due to the improved algorithm of loading images on the site.
Please enter a valid addres(es) of the shop where you are going to use the add-on.
By subscription 5 100 
Write a review
Latest module version Updated:
Have questions about the module? Write to us: HelpDesk

Images lazy load

This add-on is part of our Subscription plan.

Subscribe once — enjoy all add-ons without limits.

Images lazy load speeds up a CS-Cart storefront by loading images only when the customer approaches them while scrolling. The first screen becomes lighter, the page becomes usable sooner, and the store does not spend traffic on images the customer has not reached yet.

What it is for

The add-on is useful for stores with large catalogs, image-rich product pages, banners, blog blocks, and graphic menus. It helps reduce browser and network load, improve perceived site speed, and handle pages with many images without configuring every product or block manually.

Key features

  • Defers image loading until images appear near the visible area of the page.
  • Works with product images, thumbnails, banners, blog blocks, and menu graphics.
  • Supports images used as backgrounds in banners and selected theme elements.
  • Lets the administrator choose the JavaScript library source: external CDN or local add-on files.
  • Shows a safe placeholder for images that do not yet have a real source.
  • Respects pages where lazy loading must not interfere with standard behavior, such as product quick view.

How it works

After activation, the add-on automatically changes image output on the storefront. Instead of loading every image immediately, it marks images for lazy loading and connects a script that tracks when an image gets close to the viewport. As the customer scrolls, the required image is loaded at the right moment.

The same approach is applied to background images: banners, menus, and other graphic blocks do not make the first screen heavier, but still appear correctly when the customer needs them. The administrator can keep loading libraries from an external source or switch to the local scripts included with the add-on.

Have questions about the add-on?

Write to us.


Product:
  • Store Builder
  • Store Builder Ultimate
  • Multi-Vendor
  • Multi-Vendor Plus
  • Multi-Vendor Ultimate
Recipient:
  • Owners
Development
:
  • Backend
  • Frontend
Localization:
  • English
  • Русский
Compatible versions:
  • 4.18.X
  • 4.17.X
  • 4.16.X

Instructions for Images lazy load

What the add-on does

The add-on enables lazy loading for images on the CS-Cart storefront. It does not load every image on the page immediately; instead, it adds lazy-load attributes and connects JavaScript that loads an image when the customer scrolls close to the corresponding block.

The add-on applies to product images, thumbnails, banners, menu images, and selected blog/theme blocks. You do not need to configure every product or banner separately.

Where to find the add-on

The settings are available in the administration panel: Add-ons → Manage add-ons → Images lazy load.

The settings contain the Use external js library option:

  • Enabled — the add-on loads Intersection Observer and Vanilla LazyLoad libraries from an external CDN.
  • Disabled — the add-on uses local JavaScript files supplied with the add-on.

If the project blocks external CDNs or the store must work without requests to third-party sources, disable the external option and use local scripts.

How it works on the storefront

  • Regular images receive the csc-lazy class and the image URL in lazy-load attributes.
  • Images below the first screen are loaded only when they approach the visible area of the page.
  • For background images in banners and menu elements, the add-on postpones loading until the block becomes relevant for the customer.
  • Product quick view pages and selected service scenarios are not changed, so lazy loading does not interfere with standard CS-Cart behavior.

How to test

  1. Open a storefront category with many products or a product page with several images.
  2. Refresh the page and start scrolling down.
  3. Check that images below the first screen appear as you approach them instead of loading all at once when the page opens.
  4. Open a page with banners, blog content, or an image-based menu and make sure the images appear correctly.
  5. If caching is enabled, clear the CS-Cart and browser cache, then repeat the test.

Common situations

  • If the external library is blocked by network restrictions or a security policy, disable Use external js library.
  • If some images do not appear after changing settings, clear the CS-Cart and browser cache.
  • If the issue is visible only in a specific theme, banner add-on, or third-party block, test the page without additional image optimization add-ons and conflicting lazy-load scripts.
  • If SVG images have incorrect dimensions, check the original image dimensions: the add-on keeps SVG width and height in styles to prevent distortion.

Change history

v1.2.1 from 2026-04-28

[*] Updated the add-on template

v1.2.0 from 2026-03-17

[*] Updated the add-on template

[!] Fixed logo and icon distortion

[!] Fixed brand images not displaying on the homepage

v1.1.1 from 2024-03-06

[+] Added style constraints for image width and height

v1.1.0 from 2024-03-06

[+] Added an option to choose the JavaScript library source

v1.0.3 from 2023-12-11

[*] Replaced short PHP tags with the full format

[*] Brought the add-on in line with project standards

v1.0.2 from 2023-05-12

[*] Updated the licensing mechanism

Legend:

[+] Added

[-] Removed

[*] Changed

[!] Bug fix

Reviews
Anonymous
У модуля есть недостатки: 1. Нельзя отключить отложенную загрузку логотипа. 2. Иконки Брендов пропадают на главной странице "Популярные бренды"
Similar add-ons