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>

Fix doc.readyState

Fix doc.readyState

Improve SEO for demo page.

Improve SEO for demo page.

Add callback for deferscript()

• Add callback for deferscript()
• Update demo
• Update document
• Add translation bar (EN, JA, VI)
• Fix HTML

Fix demo for smartphone view

Fix demo.html for smartphone view.

Add defer_plus, update document

I also added some extra helpers to lazy load CSS files, images and iframes. They are all easy to use.

You can view all full examples here.

deferstyle

deferstyle(fn [, delay [, context ]])

Example:

deferstyle('https://highlightjs.org/static/demo/styles/tomorrow.css', 'highlightjs-css', 1000);

deferimg

deferimg(class_name = 'lazy' [, delay = 0 [, load_class = 'loaded' [, callback = null ]]])

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('basic', 100);</script>

deferiframe

deferiframe(class_name = 'lazy' [, delay = 0 [, load_class = 'loaded' [, callback = null ]]])

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('video', 100, 'loaded', function(frame) {
    frame.onload = function() {
        frame.classList.add('show');
    }
});
</script>

Added defer.js

Added defer.js