JavaScript unveil.js - 'lazy load'插件的轻量级版本

Posted 2021-05-20

(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 );