---
title: Lazy Load Demo
subTitle: Lazy Load
nav: demos
description: Lazy Load carousel
sort: 1

tags: 
- demo
- plugin
---

<div class="owl-carousel owl-theme">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
</div>


{{#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 `<img>` but on other DOM element then Owl will load an image into css inline background style.


### Setup
```
$('.owl-carousel').owlCarousel({
	items:4,
	lazyLoad:true,
	loop:true,
	margin:10
});
```
### HTML:

```
<div class="owl-carousel owl-theme">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=1" data-src-retina="http://placehold.it/350x250&text=1-retina" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=2" data-src-retina="http://placehold.it/350x250&text=2-retina" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=3" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=4" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=5" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=6" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=7" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=8" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=9" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=10" alt="">
	<img class="owl-lazy" data-src="http://placehold.it/350x250&text=11" alt="">
</div>
```


{{/markdown }}
<script>
jQuery(document).ready(function($) {
	$('.owl-carousel').owlCarousel({
		items:4,
		lazyLoad:true,
		loop:true,
		margin:10
	});
});
</script>
