Lazy loading in ComboStrap

Page Speed Performance


lazy loading is the loading of resources such as image only when:

  • they are on the screen (ie visible)
  • or are going to enter on the screen

ComboStrap supports and enables by default the lazy loading of:


The lazy attribute defines the lazy behavior:

  • none: the image is not lazily loaded.
  • html: the image is lazy loaded by the browser
  • lozad: the image is lazy loaded by the lozad library



Page Speed Performance


The default value is:

Background color

While the image is loading with the lozad method, the user will see a background-color as a placeholder that appears with a fade effect.

The default color is set in the configuration lazyloadingplaceholdercolor but you can change it with the standard background-color attribute.

  • You can use a color value
  • You can use a CSS color value
  • You can't use a bootstrap color value

Example with a dark color.


Stock Image Surfer In The See

We have added padding (spacing=p-3) to be able to see the background. Without the spacing attribute, the background color is only seen when the image is loading



If the media loaded is heavy, the user sees a box with a background color that fades gracefully.

With this configuration, you can change the placeholder background color.

By default, the value is: #cbf1ea

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Recommended Pages
Undraw My Documents
ComboStrap - Print

How to handle component on print
Undraw Website Builder Re Ii6e
How to create a carrousel layout

The carrousel component permits to layout and to scroll components horizontally.
Stock Image Surfer In The See
How to use the image tag in ComboStrap

Combostrap supports raster and vector images. This page shows you how to add an image with syntax and examples.
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion
Lazy Responsive Load
Raster Image in ComboStrap (jpg, png, ...)

From lazy loading to automatic resizing, this page tells you how ComboStrap manages raster image
Page Speed Performance
What makes the ComboStrap performance so fast?

This article explains the secret sauce of the ComboStrap performance and what you should avoid in order to not degrade it.

Task Runner