---
title: Lazy Load Demo
subTitle: Lazy Load
nav: demos
description: Lazy Load carousel
sort: 1
tags:
- demo
- plugin
---
{{#markdown }}
### Overview
Add lazyLoad to plugin setup:
```
lazyLoad: true
```
LazyLoad HTML structure requires `class="owl-lazy"` and `data-src="url_to_img"` or/and `data-src-retina="url_to_highres_img"`.
If you set above settings not on `![]()
` but on other DOM element then Owl will load an image into css inline background style.
You can even use picture tags with different sources by adding the `owl-lazy` class to the source tag and a data-srcset attribute.
### Setup
```
$('.owl-carousel').owlCarousel({
items:4,
lazyLoad:true,
loop:true,
margin:10
});
```
### HTML:
```
```
{{/markdown }}