---json
{
    "canonical": ":lazy:load",
    "description": "ComboStrap loads all images by default in a lazy mode meaning that they are loaded only when they are going to enter the screen.",
    "layout": "median",
    "page_id": "e632636hw0ys0dreyctbt",
    "title": "Lazy loading in ComboStrap"
}
---
====== 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:
  * [[docs:content:raster|raster image (png, jpg, gif, ...)]]
  * [[docs:content:svg|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:
<webcode>
<code dw>
{{:page_speed_performance.png?400&lazy=none|}}
</code>
</webcode>


===== Default =====

The default value is:
  * ''none'' if the image is in the [[:docs:theme:slot:main_header_slot|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 [[docs:styling:color|''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''. 

<webcode name="Default" frameborder="0">
<code dw>
{{:docs:block:stock_image_surfer_in_the_see.png?300&background-color=#6c757d&spacing=p-3|}}
</code>
</webcode>

<note>We have added [[docs:styling:spacing|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</note>
===== Configuration =====

==== lazyLoadingPlaceholderColor ====

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

With this [[docs:app:configuration|configuration]], you can change the placeholder background color.

By default, the value is: ''#cbf1ea''