Use query selector for deferimg and deferiframe methods

Use query selector for deferimg and deferiframe methods:

deferimg

deferimg(query_selector = 'img.lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(image) {} ]]])

The this in callback is a reference to the target <img> DOM element.

Example: Control your lazy images, anywhere, anytime.

<img class="basic"
    data-src="https://picsum.photos/400/300/?image=314"
    width="400" height="300" alt="Random image" />

<script type="text/javascript">deferimg('img.basic', 100);</script>

deferiframe

deferiframe(query_selector = 'iframe.lazy' [, delay = 0 [, load_class = 'loaded' [, callback = function(frame) {} ]]])

The this in callback is a reference to the target <iframe> DOM element.

Example: Lazy-load iframes (Youtube videos) with CSS effect.

<style type="text/css">
.fade {
    transition: opacity 500ms ease;
    opacity: 0;
}

.fade.show {
    opacity: 1;
}
</style>

<iframe class="video fade"
    data-src="https://www.youtube.com/embed/Uz970DggW7E"
    frameborder="0" width="560" height="315" allowfullscreen
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>

<script type="text/javascript">
deferiframe('iframe.video', 100, 'loaded', function(frame) {
    frame.onload = function() {
        frame.classList.add('show');
    }
});
</script>