- Lazy juggling of srcset/sizes attributes introduced

- Pass matches to lazyload_images_placeholder_image filter allowing it to generate individually sized images
- Allow data:image placeholder URLs

Author: deas

js/lazy-load.js

@@ -17,11 +17,20 @@
 
 	function lazy_load_image( img ) {
 		var $img = jQuery( img ),
-			src = $img.attr( 'data-lazy-src' );
+			src = $img.attr( 'data-lazy-src' ),
+			srcset = $img.attr( 'data-lazy-srcset' ),
+			sizes = $img.attr( 'data-lazy-sizes' );
 
 		if ( ! src || 'undefined' === typeof( src ) )
 			return;
 
+		if ( 'undefined' !== typeof( srcset ) && srcset ) {
+			$img.removeAttr( 'data-lazy-srcset' );
+			$img.removeAttr( 'data-lazy-sizes' );
+			img.sizes = sizes;
+			img.srcset = srcset;
+		}
+
 		$img.unbind( 'scrollin' ) // remove event binding
 			.hide()
 			.removeAttr( 'data-lazy-src' )

lazy-load.php

@@ -62,7 +62,7 @@ static function add_image_placeholders( $content ) {
 
 	static function process_image( $matches ) {
 		// In case you want to change the placeholder image
-		$placeholder_image = apply_filters( 'lazyload_images_placeholder_image', self::get_url( 'images/1x1.trans.gif' ) );
+		$placeholder_image = apply_filters( 'lazyload_images_placeholder_image', self::get_url( 'images/1x1.trans.gif' ), $matches );
 
 		$old_attributes_str = $matches[2];
 		$old_attributes = wp_kses_hair( $old_attributes_str, wp_allowed_protocols() );
@@ -73,13 +73,16 @@ static function process_image( $matches ) {
 
 		$image_src = $old_attributes['src']['value'];
 
-		// Remove src and lazy-src since we manually add them
-		$new_attributes = $old_attributes;
-		unset( $new_attributes['src'], $new_attributes['data-lazy-src'] );
+        // Also retain the srcset, and sizes if present. The latter is to keep w3c validator happy (sizes requires srcset)
+        $lazy_srcset_attribute = ( ! empty( $old_attributes['srcset'] ) ) ? 'data-lazy-srcset="' . $old_attributes['srcset']['value'] . '"' : '';
+        $lazy_sizes_attribute = ( ! empty( $old_attributes['sizes'] ) ) ? 'data-lazy-sizes="' . $old_attributes['sizes']['value'] . '"' : '';
+        // Remove src, lazy-src, srcset, lazy-srcset, sizes and data-lazy-sizes since we manually add them
+        $new_attributes = $old_attributes;
+        unset( $new_attributes['src'], $new_attributes['data-lazy-src'], $new_attributes['srcset'], $new_attributes['data-lazy-srcset'], $new_attributes['sizes'], $new_attributes['data-lazy-sizes'] );
 
 		$new_attributes_str = self::build_attributes_string( $new_attributes );
-
-		return sprintf( '<img src="%1$s" data-lazy-src="%2$s" %3$s><noscript>%4$s</noscript>', esc_url( $placeholder_image ), esc_url( $image_src ), $new_attributes_str, $matches[0] );
+        $placeholder_url = strpos($placeholder_image, 'data:') == 0 ? $placeholder_image : esc_url( $placeholder_image );
+        return sprintf( '<img src="%1$s" data-lazy-src="%2$s" %3$s %4$s %5$s><noscript>%6$s</noscript>', $placeholder_url , esc_url( $image_src ), $lazy_srcset_attribute, $lazy_sizes_attribute, $new_attributes_str, $matches[0] );
 	}
 
 	private static function build_attributes_string( $attributes ) {