Lazy loading in ComboStrap

Page Speed Performance

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:

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|}}

Page Speed Performance

Default

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.

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

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

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




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.
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