jQuery UI Lazy Image

How to Use

$( '.lazyImage' ).each( function() {
    var $lazyImage = $( this );

    if ( !$lazyImage.data( 'smnLazyImage' ) ) {
        $lazyImage.lazyImage( {
            onImageInViewport: function( event, widget, imageUrl ) {
                // can be used to show some loading indicator
                widget.element.addClass( 'loading' );
            },
            onImageLoaded: function( event, widget, imageUrl ) {
                widget.element.hide();

                if ( widget.element.is( 'img' ) ) {
                    widget.element.attr( 'src', imageUrl );
                } else {
                    widget.element.css( 'background-image', 'url(' + imageUrl + ')' );
                }

                widget.element.removeClass( 'loading' );
                widget.element.addClass( 'loaded' );
                widget.element.show();
            },
            onImageFailedToLoad: function( event, widget, imageUrl ) {
                widget.element.removeClass( 'loading' );
                widget.element.addClass( 'failedToLoad' );
            }
        } );
    }
} );

Release History

2.0.0

• Removed dependency to Waypoint's Inview shortcut by integrating the configuration and initialization of required Waypoints into this lazy-image widget.
• Replaced the built-in image loaded event handler with just a trigger of a custom onImageLoaded event that can be defined via the widget's settings.

1.0.1

• Moved out-of-viewport handlers from exit event to exited event.

1.0.0

• Added basic component.