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>