揭幕.js-一个轻量级的延迟加载插件

Posted 2021-02-24

Via @lmgalmeida

Usage:

data-src="image.jpg" src="loader.gif"

$("img").unveil();

(function( $ ) {
    $.fn.unveil = function () {
        var images = this, loaded, inview;
 
        this.one("unveil", function(){
            this.setAttribute( "src", this.getAttribute( "data-src" ) );
            this.removeAttribute( "data-src" );
        });
 
        function unveil () {
            inview = images.filter(function(){
                var $e = $(this),
                    $w = $(window),
                    wt = $w.scrollTop(),
                    wb = wt + $w.height(),
                    et = $e.offset().top,
                    eb = et + $e.height();
 
                return eb >= wt && et <= wb;
            });
 
            loaded = inview.trigger("unveil");
            images = images.not( loaded );
        }
 
        $(window).scroll(unveil);
        unveil();
 
        return this;
    };
})( jQuery );