From 3390e668ee84060c7fcf1395a14204bbc241263a Mon Sep 17 00:00:00 2001
From: Andreas Steffan <a.steffan@contentreich.de>
Date: Wed, 10 Aug 2016 13:46:59 +0200
Subject: [PATCH] - 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 - Removed
 .hide() flickering - Added css/noscript to head so only one image appears w/o
 JavaScript enabled

---
 js/lazy-load.js | 13 +++++++++++--
 lazy-load.php   | 19 +++++++++++++------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/js/lazy-load.js b/js/lazy-load.js
index b7457ca..2182a79 100644
--- a/js/lazy-load.js
+++ b/js/lazy-load.js
@@ -17,13 +17,22 @@
 
 	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()
+			// .hide() // Flickering looks bad
 			.removeAttr( 'data-lazy-src' )
 			.attr( 'data-lazy-loaded', 'true' );
 
diff --git a/lazy-load.php b/lazy-load.php
index b80398b..c63e3c1 100644
--- a/lazy-load.php
+++ b/lazy-load.php
@@ -35,6 +35,9 @@ static function setup_filters() {
 		add_filter( 'the_content', array( __CLASS__, 'add_image_placeholders' ), 99 ); // run this later, so other content filters have run, including image_add_wh on WP.com
 		add_filter( 'post_thumbnail_html', array( __CLASS__, 'add_image_placeholders' ), 11 );
 		add_filter( 'get_avatar', array( __CLASS__, 'add_image_placeholders' ), 11 );
+        ?>
+        <noscript><style type="text/css">.lazy { display:none; }</style></noscript>
+        <?php
 	}
 
 	static function add_scripts() {
@@ -62,7 +65,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 +76,17 @@ 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;
+        $css_class = $new_attributes['class'] ? $new_attributes['class']['value'].' lazy' : 'lazy';
+        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 );
-
-		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" class="%2$s" data-lazy-src="%3$s" %4$s %5$s %6$s><noscript>%7$s</noscript>', $placeholder_url , $css_class, esc_url( $image_src ), $lazy_srcset_attribute, $lazy_sizes_attribute, $new_attributes_str, $matches[0] );
 	}
 
 	private static function build_attributes_string( $attributes ) {