Skip to content
This repository was archived by the owner on Oct 19, 2022. It is now read-only.

Add support for the srcset attribute #6

Closed
wants to merge 1 commit into from
Closed

Add support for the srcset attribute #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion js/lazy-load.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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();
}
Expand Down
179 changes: 91 additions & 88 deletions lazy-load.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <head> 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)([^>]+?)(>(.*?)</\\1>|[\/]?>)#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( '<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] );
}

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 <head> 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)([^>]+?)(>(.*?)</\\1>|[\/]?>)#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( '<img src="%1$s" data-lazy-src="%2$s" %3$s %4$s><noscript>%5$s</noscript>', 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' ) );
Expand Down