ComboStrap - Lazy Loading

About

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:

• raster image (png, jpg, gif, …)
• svg

Attribute

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

Example:

{{:page_speed_performance.png?400&lazy=none|}}

Default

The default value is:

• none if the image is in the main header slot
• html otherwise.

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.

{{:docs:block:stock_image_surfer_in_the_see.png?300&background-color=#6c757d&spacing=p-3|}}

Configuration

lazyLoadingPlaceholderColor

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