1. Extending Oracle Commerce
  2. Improve Storefront Performance
  3. Lazy load images

Lazy load images

Lazy loading of images helps pages to provide more content by recognizing which images will be presented to the shopper, and loading them first. These images are known as in focus. Lazy loading is not used for images that are already in focus. It is instead used for images that will be seen by the shopper only when scrolling, and do not need to be fully loaded during the initial page draw. Instead, the shopper might see an initial generic image, such as a blurred/transparent image of the product, or a spinner. These images are known as out of focus. When the image comes into view on the page, the required image is rendered.

Enable lazy loading

By default, lazy loading is disabled. To enable this feature, use the loadImagesLazily client configuration setting in the Admin REST API. For example: 

PUT  /ccadmin/v1/merchant/clientConfiguration
{ 
 "loadImagesLazily" : true
}

You can also set the time that out of focus images are loaded. By using delayBeforeLoadingOutOfFocusImages, you can identify the number of seconds to wait before loading any remaining out of focus images. Using the Admin REST API, you could do the following to set a 10 second delay before the out of focus images are loaded: 

{ 
"loadImagesLazily" : true, 
"delayBeforeLoadingOutOfFocusImages" : 10
}

Once lazy loading is enabled, images rendered using the following image bindings will be lazily loaded:

  • ccResizeImage - Used in the Product Listing widget.
  • productVariantImageSource - Used in the Cart Summary and Shipping Options widgets.
  • imageSource - Used in the Cart Summary widget.
  • productImageSource - Used in the Scheduled Order and Related Products widgets.
  • Image - This binding can be used to display simple images. Used in the Product Details widget to display images in the product's image carousel.

You can specify an initial place holder image that is displayed while the image is out of view from the shopper. When the shopper scrolls through the page, the initial place holder may be displayed briefly while the requested image is obtained and then rendered. To set an initial place holder, use the initialSrc attribute in one of the above image bindings. If the initialSrc attribute is not specified, then the image specified in site-specific noimage setting will be used as the initial placeholder image.

The following binding attributes can be used with the image bindings listed above:

  • lazyLoadingImageClass - The default value for this attribute is ccLazyLoad. This binding defined the CSS class to use with the temporary image while the actual image is loaded. By default, this class reduces the opacity of the initial image to 0.1.
  • lazyLoadedImageClass - The default value for this attribute is ccLazyLoaded. This binding defined the CSS class to use with the final loaded image.
  • lazyLoadingParentClass - The default value for this attribute in ccLazyload-background. This attribute defines the CSS class to use with the parent element of the initial image. By default, the background color of this image is light gray.
  • initialSrc - Specifies the initial image source that should be used while the main image remains out of focus. If the initialSrc attribute is not used, the default error image is displayed.
  • disableLazyImageLoading - Disables lazy loading for the image.

Disable lazy image loading

You can disable lazy image loading for an individual image as follows:

<img data-bind = "image: {src: yourImageSource, disableLazyImageLoading: true}, ...">

To disable lazy image loading for all images, set the loadImagesLazily client configuration value back to false.