Always lazy load images, fixes #29

tyrann0us · Sep 30, 2017 · d7c7a6a · d7c7a6a
1 parent a5998ed
commit d7c7a6a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/inc/class-main.php b/inc/class-main.php
@@ -280,4 +280,34 @@ public static function get_asset_suffix() {
 
 	}
 
+	/**
+	 * Enable lazy loading of images by replacing image attributes.
+	 *
+	 * @since  0.5.0
+	 *
+	 * @see wp_get_attachment_image()
+	 * @param array        $attr       Attributes for the image markup.
+	 * @param WP_Post      $attachment Image attachment post.
+	 * @param string|array $size       Requested size. Image size or array of width and height values (in that order). Default 'thumbnail'.
+	 * @return array $attr 
+	 */
+	public static function switch_attachment_attr( $attr, $attachment, $size ) {
+
+		$attributes = array(
+			'sizes'  => 'data-sizes',
+			'src'    => 'data-lazy',
+			'srcset' => 'data-srcset',
+		);
+
+		foreach ( $attributes as $key => $attribute ) {
+			if ( isset( $attr[ $key ] ) ) {
+				$attr[ $attribute ] = $attr[ $key ];
+				unset( $attr[ $key] );
+			}
+		}
+
+		return $attr;
+
+	}
+
 }
diff --git a/inc/class-output.php b/inc/class-output.php
@@ -193,6 +193,16 @@ public static function slick_markup( $output = '', $atts, $instance ) {
 				$options['showCaption'] = true;
 			}
 
+			add_filter(
+				'wp_get_attachment_image_attributes',
+				array(
+					'Slick_Slider_Main',
+					'switch_attachment_attr'
+				),
+				10,
+				3
+			);
+
 			do_action( 'slick_slider_before_slider', $atts, $post->ID, self::$slick_instance );
 
 			$output = [];
@@ -217,18 +227,7 @@ public static function slick_markup( $output = '', $atts, $instance ) {
 				$slide[] = sprintf( '<div class="slide" data-attachment-id="%s">', $id );
 				$slide[] = '<div class="slide__inner">';
 
-				$image_src = wp_get_attachment_image_src( $id, $atts['size'] );
-				$meta = wp_prepare_attachment_for_js( $id );
-				$image_tag = isset( $options['lazyLoad'] ) && 'progressive' === $options['lazyLoad']
-					? sprintf(
-						'<img data-lazy="%s" width="%s" height="%s" alt="%s" />',
-						$image_src[0],
-						$image_src[1],
-						$image_src[2],
-						$meta['alt'] ? sanitize_title( $meta['alt'] ) : ''
-					)
-					: wp_get_attachment_image( $id, $atts['size'] );
-
+				$image_tag = wp_get_attachment_image( $id, $atts['size'] );
 
 				if ( class_exists( 'WPGalleryCustomLinks' ) && $link = get_post_meta( $id, '_gallery_link_url', true ) ) {
 					$slide[] = sprintf(
@@ -250,6 +249,7 @@ public static function slick_markup( $output = '', $atts, $instance ) {
 				}
 
 				if ( isset( $options['showCaption'] ) && $options['showCaption'] ) {
+					$meta = wp_prepare_attachment_for_js( $id );
 					$caption_text = ! empty( $meta['caption'] )
 						? $meta['caption']
 						: ( ! empty( $meta['title'] )

diff --git a/readme.txt b/readme.txt
@@ -135,6 +135,7 @@ If you want, [you can buy me a beer too](https://www.paypal.com/cgi-bin/webscr?c
 * Feature: Updated Slick to v1.8.0
 * Feature: Added new options “appendDots”, “dotsClass”, "focusOnChange", “pauseOnFocus”, “waitForAnimate” and “zIndex”
 * Feature: Added new option “Show caption”, deprecating the `slick_slider_show_caption` filter
+* Feature: Always lazy load images to improve page load time
 * Fix: Bug that hid the Slick Slider settings in the Gallery Media Modal under certain circumstances
 * Misc: Added new actions `slick_slider_before_slider`, `slick_slider_after_slider`, `slick_slider_before_slide` and `slick_slider_after_slide`
 * Misc: Extended filters `slick_slider_caption_html`, `slick_slider_slide_html` and `slick_slider_html`