ComboStrap - Lazy Loading
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
The default value is:
- none if the image is in the main header slot
- html otherwise.
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.
- 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.
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