Fix lazyloading without srcset (#192)

* fixed wrong attributes for image with lazy loading with empty srcset attribute

* added tests

* fixed jetpack js file with fix loading

assets/js/3rd/plugin-jetpack.js

@@ -27,6 +27,9 @@ $(document).on('loadedNewItems.vpf', function (event) {
 });
 
 // Fix masonry reloading when Jetpack images lazy loaded.
+// https://github.com/Automattic/jetpack/issues/9595
+//
+// p.s. it looks like this fix is not working at all in Safari browser.
 const runReLayout = debounce(200, ($gallery) => {
 	$gallery.vpf('imagesLoaded');
 });

classes/3rd/plugins/class-jetpack.php

@@ -34,7 +34,7 @@ public function wp_enqueue_scripts() {
 			return;
 		}
 
-		Visual_Portfolio_Assets::register_script( 'visual-portfolio-3rd-jetpack', 'assets/js/3rd/plugin-jetpack.min', array( 'jquery' ) );
+		Visual_Portfolio_Assets::register_script( 'visual-portfolio-3rd-jetpack', 'build/assets/js/3rd/plugin-jetpack', array( 'jquery' ) );
 
 		$wp_scripts->registered[ $jetpack_ll_handler ]->deps[] = 'visual-portfolio-3rd-jetpack';
 	}

classes/class-images.php

@@ -437,7 +437,7 @@ public static function process_image_attributes( $attributes ) {
 
 		$attributes['data-src'] = $attributes['src'];
 
-		if ( isset( $attributes['srcset'] ) ) {
+		if ( ! empty( $attributes['srcset'] ) ) {
 			$attributes['data-srcset'] = $attributes['srcset'];
 
 			if ( $placeholder ) {

tests/phpunit/unit/test-class-images.php

@@ -87,6 +87,17 @@ public function test_lazy_loading_srcset_sizes_attributes() {
         $image_string = '<img loading="lazy" src="image.jpg" srcset="image.jpg 2x" sizes="100vw" alt="Test Image" width="10" height="10">';
         $lazy_string  = '<img loading="eager" src="image.jpg" srcset="' . $placeholder . '" alt="Test Image" width="10" height="10" data-src="image.jpg" data-srcset="image.jpg 2x" data-sizes="auto" class="vp-lazyload">';
 
+        $this->assertEquals(
+            $this->get_noscript_image( $image_string ) . $lazy_string,
+            Visual_Portfolio_Images::add_image_placeholders(
+                $image_string
+            )
+        );
+
+		// When srcset exists, but it is empty.
+        $image_string = '<img loading="lazy" src="image.jpg" srcset alt="Test Image" width="10" height="10">';
+        $lazy_string  = '<img loading="eager" src="' . $placeholder . '" srcset alt="Test Image" width="10" height="10" data-src="image.jpg" data-sizes="auto" class="vp-lazyload">';
+
         $this->assertEquals(
             $this->get_noscript_image( $image_string ) . $lazy_string,
             Visual_Portfolio_Images::add_image_placeholders(