diff --git a/js/lazy-load.js b/js/lazy-load.js
index b7457ca..60bf5ab 100644
--- a/js/lazy-load.js
+++ b/js/lazy-load.js
@@ -17,7 +17,8 @@
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' );
if ( ! src || 'undefined' === typeof( src ) )
return;
@@ -27,6 +28,11 @@
.removeAttr( 'data-lazy-src' )
.attr( 'data-lazy-loaded', 'true' );
+ if ( 'undefined' !== typeof( srcset ) && srcset ) {
+ $img.removeAttr( 'data-lazy-srcset' );
+ img.srcset = srcset;
+ }
+
img.src = src;
$img.fadeIn();
}
diff --git a/lazy-load.php b/lazy-load.php
index b80398b..8920898 100644
--- a/lazy-load.php
+++ b/lazy-load.php
@@ -15,97 +15,100 @@
class LazyLoad_Images {
- const version = '0.6.1';
- protected static $enabled = true;
-
- static function init() {
- if ( is_admin() )
- return;
-
- if ( ! apply_filters( 'lazyload_is_enabled', true ) ) {
- self::$enabled = false;
- return;
- }
-
- add_action( 'wp_enqueue_scripts', array( __CLASS__, 'add_scripts' ) );
- add_action( 'wp_head', array( __CLASS__, 'setup_filters' ), 9999 ); // we don't really want to modify anything in since it's mostly all metadata, e.g. OG tags
- }
-
- 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 );
- }
-
- static function add_scripts() {
- wp_enqueue_script( 'wpcom-lazy-load-images', self::get_url( 'js/lazy-load.js' ), array( 'jquery', 'jquery-sonar' ), self::version, true );
- wp_enqueue_script( 'jquery-sonar', self::get_url( 'js/jquery.sonar.min.js' ), array( 'jquery' ), self::version, true );
- }
-
- static function add_image_placeholders( $content ) {
- if ( ! self::is_enabled() )
- return $content;
-
- // Don't lazyload for feeds, previews, mobile
- if( is_feed() || is_preview() )
- return $content;
-
- // Don't lazy-load if the content has already been run through previously
- if ( false !== strpos( $content, 'data-lazy-src' ) )
- return $content;
-
- // This is a pretty simple regex, but it works
- $content = preg_replace_callback( '#<(img)([^>]+?)(>(.*?)|[\/]?>)#si', array( __CLASS__, 'process_image' ), $content );
-
- return $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' ) );
-
- $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'];
-
- // Remove src and lazy-src since we manually add them
- $new_attributes = $old_attributes;
- unset( $new_attributes['src'], $new_attributes['data-lazy-src'] );
-
- $new_attributes_str = self::build_attributes_string( $new_attributes );
-
- return sprintf( '
', esc_url( $placeholder_image ), esc_url( $image_src ), $new_attributes_str, $matches[0] );
- }
-
- private static function build_attributes_string( $attributes ) {
- $string = array();
- foreach ( $attributes as $name => $attribute ) {
- $value = $attribute['value'];
- if ( '' === $value ) {
- $string[] = sprintf( '%s', $name );
- } else {
- $string[] = sprintf( '%s="%s"', $name, esc_attr( $value ) );
- }
- }
- return implode( ' ', $string );
- }
-
- static function is_enabled() {
- return self::$enabled;
- }
-
- static function get_url( $path = '' ) {
- return plugins_url( ltrim( $path, '/' ), __FILE__ );
- }
+ const version = '0.6.1';
+ protected static $enabled = true;
+
+ static function init() {
+ if ( is_admin() )
+ return;
+
+ if ( ! apply_filters( 'lazyload_is_enabled', true ) ) {
+ self::$enabled = false;
+ return;
+ }
+
+ add_action( 'wp_enqueue_scripts', array( __CLASS__, 'add_scripts' ) );
+ add_action( 'wp_head', array( __CLASS__, 'setup_filters' ), 9999 ); // we don't really want to modify anything in since it's mostly all metadata, e.g. OG tags
+ }
+
+ 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 );
+ }
+
+ static function add_scripts() {
+ wp_enqueue_script( 'wpcom-lazy-load-images', self::get_url( 'js/lazy-load.js' ), array( 'jquery', 'jquery-sonar' ), self::version, true );
+ wp_enqueue_script( 'jquery-sonar', self::get_url( 'js/jquery.sonar.min.js' ), array( 'jquery' ), self::version, true );
+ }
+
+ static function add_image_placeholders( $content ) {
+ if ( ! self::is_enabled() )
+ return $content;
+
+ // Don't lazyload for feeds, previews, mobile
+ if( is_feed() || is_preview() )
+ return $content;
+
+ // Don't lazy-load if the content has already been run through previously
+ if ( false !== strpos( $content, 'data-lazy-src' ) )
+ return $content;
+
+ // This is a pretty simple regex, but it works
+ $content = preg_replace_callback( '#<(img)([^>]+?)(>(.*?)|[\/]?>)#si', array( __CLASS__, 'process_image' ), $content );
+
+ return $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' ) );
+
+ $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'];
+
+ // Also retain the srcset, if present.
+ $lazy_srcset_attribute = ( ! empty( $old_attributes['srcset'] ) ) ? 'data-lazy-srcset="' . $old_attributes['srcset']['value'] . '"' : '';
+
+ // Remove src, lazy-src, srcset and lazy-srcset 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_str = self::build_attributes_string( $new_attributes );
+
+ return sprintf( '', esc_url( $placeholder_image ), esc_url( $image_src ), $lazy_srcset_attribute, $new_attributes_str, $matches[0] );
+ }
+
+ private static function build_attributes_string( $attributes ) {
+ $string = array();
+ foreach ( $attributes as $name => $attribute ) {
+ $value = $attribute['value'];
+ if ( '' === $value ) {
+ $string[] = sprintf( '%s', $name );
+ } else {
+ $string[] = sprintf( '%s="%s"', $name, esc_attr( $value ) );
+ }
+ }
+ return implode( ' ', $string );
+ }
+
+ static function is_enabled() {
+ return self::$enabled;
+ }
+
+ static function get_url( $path = '' ) {
+ return plugins_url( ltrim( $path, '/' ), __FILE__ );
+ }
}
function lazyload_images_add_placeholders( $content ) {
- return LazyLoad_Images::add_image_placeholders( $content );
+ return LazyLoad_Images::add_image_placeholders( $content );
}
add_action( 'init', array( 'LazyLoad_Images', 'init' ) );