@slicemenice/jquery-ui-lazy-image

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.