Release new version 2.1.0

= 2.1.0 - 2020/01/02 =
* This feature release adds support for WebP images (this support is automatic there are no settings for it), plus compatibility with WordPress 5.3.2
* Feature - Add auto support WebP images
* Tweak - Update lazyloadxt.srcset for WebP image support
* Tweak - Update lazy style for WebP image support
* Tweak - Test for compatibility with WordPress 5.3.2

Author: alextuan

a3-lazy-load.php

@@ -2,15 +2,15 @@
 /*
 Plugin Name: a3 Lazy Load
 Description: Speed up your site and enhance frontend user's visual experience in PC's, Tablets and mobile with a3 Lazy Load.
-Version: 2.0.0
+Version: 2.1.0
 Author: a3rev Software
 Author URI: https://a3rev.com/
 Requires at least: 4.0
-Tested up to: 5.3.0
+Tested up to: 5.3.2
 Text Domain: a3-lazy-load
 Domain Path: /languages
 WC requires at least: 2.0.0
-WC tested up to: 3.8.0
+WC tested up to: 3.8.1
 License: GPLv2 or later
 	Copyright © 2011 a3 Revolution Software Development team
 	a3 Revolution Software Development team
@@ -32,7 +32,7 @@
 define('A3_LAZY_LOAD_IMAGES_URL', A3_LAZY_LOAD_URL . '/assets/images');
 
 define( 'A3_LAZY_LOAD_KEY', 'a3_lazy_load' );
-define( 'A3_LAZY_VERSION', '2.0.0' );
+define( 'A3_LAZY_VERSION', '2.1.0' );
 define( 'A3_LAZY_LOAD_G_FONTS', false );
 
 if ( version_compare( PHP_VERSION, '5.6.0', '>=' ) ) {

assets/css/jquery.lazyloadxt.fadein.css

@@ -1,5 +1,5 @@
 .lazy-hidden,.entry img.lazy-hidden, img.thumbnail.lazy-hidden {
-    opacity: 0;
+    opacity: 0.2;
     background-color: #ffffff;
 }
 figure.wp-block-image img.lazy-hidden {
@@ -13,3 +13,6 @@ figure.wp-block-image img.lazy-hidden {
     transition: opacity 0.3s;
     opacity: 1 !important;
 }
+picture source[type="image/webp"] {
+	display: block;
+}

assets/css/jquery.lazyloadxt.spinner.css

@@ -6,4 +6,7 @@
 }
 figure.wp-block-image img.lazy-hidden {
 	min-width: 150px;
+}
+picture source[type="image/webp"] {
+	display: block;
 }

assets/js/jquery.lazyloadxt.srcset.js

@@ -33,7 +33,7 @@
             options[property] = srcsetOptions[property];
         }
     }
-    options.selector += ',img[' + options.srcsetAttr + ']';
+    options.selector += ',img[' + options.srcsetAttr + '],source[' + options.srcsetAttr + ']';
 
     function mathFilter(array, action) {
         return Math[action].apply(null, $.map(array, function (item) {
@@ -115,4 +115,19 @@
         }
     });
 
+    $(document).on('lazyshow', 'source', function (e, $el) {
+        $(this).removeClass('lazy-hidden');
+        
+        var srcset = $el.attr(options.srcsetAttr);
+
+        if (srcset) {
+            if (!options.srcsetExtended && srcsetSupport) {
+                $el.attr('srcset', srcset);
+                $el.attr('data-srcset', '');
+            } else {
+                $el.lazyLoadXT.srcAttr = parseSrcset;
+            }
+        }
+    });
+
 })(window.jQuery || window.Zepto || window.$, window, document);

assets/js/jquery.lazyloadxt.srcset.min.js

@@ -389,6 +389,7 @@ protected function _filter_images( $content, $include_noscript = null ) {
 			$include_noscript = $a3_lazy_load_global_settings['a3l_image_include_noscript'];
 		}
 
+		// Normal image
 		$matches = array();
 		preg_match_all( '/<img[\s\r\n]+.*?>/is', $content, $matches );
 
@@ -432,6 +433,45 @@ protected function _filter_images( $content, $include_noscript = null ) {
 
 		$content = str_replace( $search, $replace, $content );
 
+		// Picture source, support for webp
+		$matches = array();
+		preg_match_all( '/<source[\s\r\n]+.*?>/is', $content, $matches );
+
+		$search = array();
+		$replace = array();
+
+		if ( is_array( $this->_skip_images_classes ) ) {
+			$skip_images_preg_quoted = array_map( array( $this, 'preg_quote_with_wildcards' ), $this->_skip_images_classes );
+			$skip_images_regex = sprintf( '/class=["\'].*(%s).*["\']/s', implode( '|', $skip_images_preg_quoted ) );
+		}
+
+		$i = 0;
+		foreach ( $matches[0] as $imgHTML ) {
+
+			// don't to the replacement if a skip class is provided and the image has the class, or if the image is a data-uri
+			if ( ! ( is_array( $this->_skip_images_classes ) && preg_match( $skip_images_regex, $imgHTML ) ) && ! preg_match( "/ data-srcset=['\"]/is", $imgHTML )  ) {
+				$i++;
+				// replace the srcset and add the data-srcset attribute
+				$replaceHTML = '';
+				$replaceHTML = preg_replace( '/<source(.*?)srcset=/is', '<source$1srcset="" data-srcset=', $imgHTML );
+
+				// add the lazy class to the img element
+				if ( preg_match( '/class=["\']/i', $replaceHTML ) ) {
+					$replaceHTML = preg_replace( '/class=(["\'])(.*?)["\']/is', 'class=$1lazy lazy-hidden $2$1', $replaceHTML );
+				} else {
+					$replaceHTML = preg_replace( '/<source/is', '<source class="lazy lazy-hidden"', $replaceHTML );
+				}
+
+				array_push( $search, $imgHTML );
+				array_push( $replace, $replaceHTML );
+			}
+		}
+
+		$search = array_unique( $search );
+		$replace = array_unique( $replace );
+
+		$content = str_replace( $search, $replace, $content );
+
 
 		return $content;
 	}

classes/class-a3-lazy-load.php

@@ -2,8 +2,8 @@
 Contributors: a3rev, a3rev Software, nguyencongtuan
 Tags: a3 lazy load, Lazy Loading , image lazy load, lazyload
 Requires at least: 4.5
-Tested up to: 5.3.0
-Stable tag: 2.0.0
+Tested up to: 5.3.2
+Stable tag: 2.1.0
 License: GPLv3
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -63,6 +63,19 @@ a3 Lazy Load has built in support for content that is added by iframe from any s
 * There are no setting options for exclude /amp - Lazy Load is just never applied to the /amp endpoint
 * When the url is loaded in browser without /amp Lazy Load is applied 
 
+= JETPACK SITE ACCELERATOR (Proton) =
+
+This is an option that you turn on as the Jetpack Accelerator (Proton CDN images) has its own lazy load feature that needs to be OFF first to be able use a3 Lazy Load as your lazy Load engine. Some users prefer to use a3 Lazy Load as it applies Lazy Load to the whole site not just images.
+
+= WebP IMAGES =
+
+As of a3 Lazy Load has built in automatic support for WebP images. There are no settings for this as a3 Lazy Load will automatically detect if an image has a WebP version and load that. If no WebP image exists the appropriate jpg or png version will be loaded. Also fully support browser detection of WebP.
+
+
+= WOOCOMMERCE =
+
+a3 lazy Load is built and tested to be fully compatible with the very widely used WooCommerce plugin  
+
 = ADVANCED CUSTOM FIELDS =
 
 Fully compatible with the very popular Advanced Custom Fields plugin, Free and Premium versions. 
@@ -75,9 +88,6 @@ a3 Lazy Load gives you the option to lazy load images with a FADE IN or SPINNER
 * SPINNER [see demo](http://ressio.github.io/lazy-load-xt/demo/spinner.htm)
 * Option to create a custom Lazy Load pre-load background colour
 
-= WOOCOMMERCE =
-
-a3 lazy Load is built and tested to be fully compatible with the very widely used WooCommerce plugin
 
 = PERFORMANCE TWEAKS =
 
@@ -112,8 +122,9 @@ These are just some of the more popular plugins that are either tested 100% comp
 * Plugin - WordPress AMP
 * Plugin - WPTouch. Note - Set to not apply on Mobiles if WPTouch is installed
 * Plugin - MobilePress - Set to not apply on Mobiles if MobilePress is installed
+* WebP Plugins - Smush, EWWW Image Optimizer, Imagify, WebP Express 
 * Plugins - Will not conflict with any plugin that has lazy load built in
-* CDN's - Cloudfront, Cloudflare and all other known CDN architecture.
+* CDN's - JetPack Accelerator, Cloudfront, Cloudflare and all other known CDN architecture.
 
 = MORE FEATURES =
 
@@ -132,8 +143,8 @@ Want to add a new language to a3 Lazy Load? Great! You can contribute via [trans
 
 = Minimum Requirements =
 
-* WordPress 4.6 or greater
-* PHP version 5.6.0 or greater
+* WordPress 4.9 or greater
+* PHP version 7.0.0 or greater
 * MySQL version 5.6 or greater OR MariaDB version 10.0 or greater
 
 == Frequently Asked Questions ==
@@ -194,6 +205,13 @@ Filter tags to add to class name of theme to exclude lazy load on images or vide
 
 == Changelog ==
 
+= 2.1.0 - 2020/01/02 =
+* This feature release adds support for WebP images (this support is automatic there are no settings for it), plus compatibility with WordPress 5.3.2
+* Feature - Add auto support WebP images 
+* Tweak - Update lazyloadxt.srcset for WebP image support
+* Tweak - Update lazy style for WebP image support
+* Tweak - Test for compatibility with WordPress 5.3.2
+
 = 2.0.0 - 2019/11/19 =
 * This feature release has a lot. PHP is upgraded to Composer PHP Dependency Manager, Compatibility with Jetpack Accelerator, a full security review, and compatibility with with WordPress 5.3.0
 * Feature - Plugin fully refactored to Composer for cleaner and faster PHP code
@@ -436,6 +454,9 @@ Filter tags to add to class name of theme to exclude lazy load on images or vide
 
 == Upgrade Notice ==
 
+= 2.1.0 =
+This feature release adds support for WebP images (this support is automatic there are no settings for it), plus compatibility with WordPress 5.3.2
+
 = 2.0.0 =
 This feature release has a lot. PHP is upgraded to Composer PHP Dependency Manager, Compatibility with Jetpack Accelerator, a full security review, and compatibility with with WordPress 5.3.0