1.1: Default lazyload image example
<img class="b-lazy" data-src="image.jpg" />
1.2: Lazy load image example with css effect
CSS:
.b-lazy {
opacity:0;
transform: scale(3);
transition: all 500ms;
}
.b-loaded {
opacity:1;
transform: scale(1);
}
1.3: Lazy load image example with low res image placeholder
<img class="b-lazy" src="low-res-image.jpg" data-src="image.jpg" />
1.4: Lazy load image example with srcset
<img class="b-lazy"
sizes="100vw"
data-srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
data-src="medium.jpg" />
1.5: Lazy load image example with picture element
<picture>
<source
media="(min-width: 650px)"
data-srcset="image-650.jpg" />
<source
media="(min-width: 465px)"
data-srcset="image-465.jpg" />
<img class="b-lazy"
data-src="default.jpg" />
</picture>
1.6: Lazyload image with retina support example
<img class="b-lazy" data-src="image.jpg|retina-image.jpg" />
2: Lazy load background image example
<div class="b-lazy" data-src="image.jpg"></div>
3.1: Horizontal lazyload inside container example
var blazy = new Blazy({
container: '.container'
});
3.2: Vertical lazyload inside container example
var blazy = new Blazy({
container: '.container'
});
4: Lazy load iframe example
<iframe class="b-lazy"
data-src="https://www.youtube.com/embed/uKtjVQ5IJOQ"
frameborder="0"
allowfullscreen>
</iframe>
5.1: Lazy load HTML5 video example
<video class="b-lazy" data-src="video.mp4" controls></video>
5.2: Lazy load HTML5 video advanced example
<video class="b-lazy" controls>
<source data-src="video.mp4" type="video/mp4">
<source data-src="video.webm" type="video/webm">
Your browser doesn't support HTML5 video tag.
</video>
6: Lazy load script example
Check the console log
<script class="b-lazy" data-src="script.js" async></script>