Styleguide Navigation

Lazy Content

Examples

  1. Default

Default

<div class="LazyContent" data-lazycontent="/component/ajax/url/"></div>

This will load and place the entire content inside the div.

<div class="LazyContent" data-lazycontent="/component/ajax/url/ #slider"></div>

This will place only the element with id "slider" into the div.

The content will be loaded as soon as the div gets into (or rather close to) the viewport. Any content of the div will be replaced by the loaded content (so we could put some placeholder inside which would be good UX practice). Also note that there are limitation: while we do initiate loaded component without further ado, inline scripts might not be executed.