Support for srcset, data URIs and individual placeholder images

[deas]

This PR introduces

• "Lazy juggling" of srcset/sizes attributes
• Pass $matches to lazyload_images_placeholder_image filter allowing it to generate individually sized placeholders
• Allow data:image placeholder URLs
• Removed hide() flickering
• Added css/noscript so only one image appears depending on js enabled/disabled

[mjangda]

The indentation should be fixed here (should be using tabs, not spaces).

[mjangda]

Thanks @deas! I left some feedback on the code.

[chvillanuevap]

Is this going to be merged with the master branch? If JavaScript is not active, but Jetpack Photon is, all images are displayed twice due to the srcset attribute added by Photon. My browser ignores the 1x1.trans.gif file set in the src attribute, but uses the srcset attribute, which points to the "correct" image.

[chvillanuevap]

I see that this push has been in limbo for a while. Are there any plans to merge the branch with the production code?

I was looking at @mjangda's comments, and I think the function process_images needs to be modified to the following:

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' ), $matches );

	$old_attributes_str = $matches[2];
	$old_attributes = wp_kses_hair( $old_attributes_str, wp_allowed_protocols() );

	if ( empty( $old_attributes['src'] ) ) {
		return $matches[0];
	}

	$image_src = $old_attributes['src']['value'];
	$image_srcset = $old_attributes['srcset']['value'];
	$image_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;
	$css_class = $new_attributes['class'] ? $new_attributes['class']['value'].' lazy-load-img' : 'lazy-load-img';
	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['class'] );

	$new_attributes_str = self::build_attributes_string( $new_attributes );
	$placeholder_url = esc_url( $placeholder_image, array( 'http', 'https', 'data' ) );

	return sprintf( '<img src="%1$s" class="%2$s" data-lazy-src="%3$s" data-lazy-srcset="%4$s" data-lazy-sizes="%5$s" %6$s><noscript>%7$s</noscript>', $placeholder_url, $css_class, esc_url( $image_src ), $image_srcset, $image_sizes, $new_attributes_str, $matches[0] );
}

Regarding @deas's comment, it is okay if data-lazy-srcset and data-lazy-sizes have empty string values, per HTML5 standards.