Examples

Default lazyload image example

<img class="hqy-lazy" data-src="image.jpg" />

Lazy load image example with css effect

// CSS:
.hqy-lazy {
    opacity:0;
    transform: scale(3);
    transition: all 500ms;
}
.hqy-loaded {
    opacity:1;
    transform: scale(1);
}

Lazy load image example with low res image placeholder

<img class="hqy-lazy" src="low-res-image.jpg" data-src="image.jpg" />

Lazy load image example with srcset

<img class="hqy-lazy" 
    sizes="100vw"
    data-srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
    data-src="medium.jpg"
/>

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="hqy-lazy lazy-item" data-src="default.jpg" />
</picture>

Lazyload image with retina support example

<img class="hqy-lazy" data-src="image.jpg,retina-image.jpg" />

Lazy load background image example

<div class="hqy-lazy" data-src="image.jpg"></div>

Horizontal lazyload inside container example

var hqylazy = new HqyLazyload({
    container: document.getElementById('lazy-horizontal')
});

Vertical lazyload inside container example

var hqylazy = new HqyLazyload({
    container: document.getElementById('lazy-vertical')
});

Lazy load iframe example

<iframe class="hqy-lazy"
    data-src="https://www.youtube.com/embed/HO_KvavFEhA"
    frameborder="0"
    allowfullscreen>
</iframe>

Lazy load HTML5 video example

<video class="hqy-lazy" data-src="video.mp4" controls></video>

Lazy load HTML5 video advanced example

<video class="hqy-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>

Lazy load script example

Check the console log

<script class="hqy-lazy" data-src="script.js" async></script>