Lazy Images: Drop jQuery, convert to vanilla JS (#14886)

* Lazy Images: Drop jQuery, convert to vanilla JS

* Lazy Images: Use the native events system

* Lazy Images: Replace the image inline, don't clone

* Lazy Images: Back-compat for events

* Lazy Images: Fix the jQuery check

3rd-party/woocommerce.php

@@ -97,7 +97,17 @@ function jetpack_woocommerce_infinite_scroll_style() {
 function jetpack_woocommerce_lazy_images_compat() {
 	wp_add_inline_script( 'wc-cart-fragments', "
 		jQuery( 'body' ).bind( 'wc_fragments_refreshed', function() {
-			jQuery( 'body' ).trigger( 'jetpack-lazy-images-load' );
+			var jetpackLazyImagesLoadEvent;
+			try {
+				jetpackLazyImagesLoadEvent = new Event( 'jetpack-lazy-images-load', {
+					bubbles: true,
+					cancelable: true
+				} );
+			} catch ( e ) {
+				jetpackLazyImagesLoadEvent = document.createEvent( 'Event' )
+				jetpackLazyImagesLoadEvent.initEvent( 'jetpack-lazy-images-load', true, true );
+			}
+			jQuery( 'body' ).get( 0 ).dispatchEvent( jetpackLazyImagesLoadEvent );
 		} );
 	" );
 }

modules/infinite-scroll/infinity.js

@@ -130,7 +130,12 @@
 
 		// Check if we can wrap the html
 		this.element.append( response.html );
-		this.body.trigger( 'post-load', response );
+
+		this.trigger( this.body.get( 0 ), 'is.post-load', {
+			jqueryEventName: 'post-load',
+			data: response,
+		} );
+
 		this.ready = true;
 	};
 
@@ -619,7 +624,10 @@
 				$set.css( 'min-height', '' ).removeClass( 'is--replaced' );
 				if ( this.pageNum in self.pageCache ) {
 					$set.html( self.pageCache[ this.pageNum ].html );
-					self.body.trigger( 'post-load', self.pageCache[ this.pageNum ] );
+					self.trigger( self.body.get( 0 ), 'is.post-load', {
+						jqueryEventName: 'post-load',
+						data: self.pageCache[ this.pageNum ],
+					} );
 				}
 			}
 		} );
@@ -716,6 +724,40 @@
 		this.disabled = false;
 	};
 
+	/**
+	 * Emits custom JS events.
+	 *
+	 * @param {Node}   el
+	 * @param {string} eventName
+	 * @param {*}      data
+	 */
+	Scroller.prototype.trigger = function( el, eventName, opts ) {
+		opts = opts || {};
+
+		/**
+		 * Emit the event in a jQuery way for backwards compatibility where necessary.
+		 */
+		if ( opts.jqueryEventName && 'undefined' !== typeof jQuery ) {
+			jQuery( el ).trigger( opts.jqueryEventName, opts.data || null );
+		}
+
+		/**
+		 * Emit the event in a standard way.
+		 */
+		var e;
+		try {
+			e = new CustomEvent( eventName, {
+				bubbles: true,
+				cancelable: true,
+				detail: opts.data || null,
+			} );
+		} catch ( err ) {
+			e = document.createEvent( 'CustomEvent' );
+			e.initCustomEvent( eventName, true, true, opts.data || null );
+		}
+		el.dispatchEvent( e );
+	};
+
 	/**
 	 * Ready, set, go!
 	 */

modules/lazy-images/js/lazy-images.js

@@ -1,6 +1,6 @@
-/* globals IntersectionObserver, jQuery */
+/* globals IntersectionObserver */
 
-var jetpackLazyImagesModule = function( $ ) {
+var jetpackLazyImagesModule = function() {
 	var images,
 		config = {
 			// If the image gets within 200px in the Y axis, start the download.
@@ -12,15 +12,16 @@ var jetpackLazyImagesModule = function( $ ) {
 		image,
 		i;
 
-	$( document ).ready( function() {
-		lazy_load_init();
+	lazy_load_init();
 
+	var bodyEl = document.querySelector( 'body' );
+	if ( bodyEl ) {
 		// Lazy load images that are brought in from Infinite Scroll
-		$( 'body' ).bind( 'post-load', lazy_load_init );
+		bodyEl.addEventListener( 'is.post-load', lazy_load_init );
 
 		// Add event to provide optional compatibility for other code.
-		$( 'body' ).bind( 'jetpack-lazy-images-load', lazy_load_init );
-	} );
+		bodyEl.addEventListener( 'jetpack-lazy-images-load', lazy_load_init );
+	}
 
 	function lazy_load_init() {
 		images = document.querySelectorAll( 'img.jetpack-lazy-image:not(.jetpack-lazy-image--handled)' );
@@ -96,40 +97,48 @@ var jetpackLazyImagesModule = function( $ ) {
 	 * @param {object} image The image object.
 	 */
 	function applyImage( image ) {
-		var theImage = $( image ),
-			srcset,
+		var srcset,
 			sizes,
-			theClone;
+			lazyLoadedImageEvent;
 
-		if ( ! theImage.length ) {
+		if ( ! image instanceof HTMLImageElement ) {
 			return;
 		}
 
-		srcset = theImage.attr( 'data-lazy-srcset' );
-		sizes = theImage.attr( 'data-lazy-sizes' );
-		theClone = theImage.clone(true);
+		srcset = image.getAttribute( 'data-lazy-srcset' );
+		sizes = image.getAttribute( 'data-lazy-sizes' );
 
-		// Remove lazy attributes from the clone.
-		theClone.removeAttr( 'data-lazy-srcset' ),
-		theClone.removeAttr( 'data-lazy-sizes' );
-		theClone.removeAttr( 'data-lazy-src' );
+		// Remove lazy attributes.
+		image.removeAttribute( 'data-lazy-srcset' ),
+		image.removeAttribute( 'data-lazy-sizes' );
+		image.removeAttribute( 'data-lazy-src' );
+
+		// Add the attributes we want.
+		image.classList.add( 'jetpack-lazy-image--handled' );
+		image.setAttribute( 'data-lazy-loaded', 1 );
 
-		// Add the attributes we want on the finished image.
-		theClone.addClass( 'jetpack-lazy-image--handled' );
-		theClone.attr( 'data-lazy-loaded', 1 );
-		if ( ! srcset ) {
-			theClone.removeAttr( 'srcset' );
-		} else {
-			theClone.attr( 'srcset', srcset );
-		}
 		if ( sizes ) {
-			theClone.attr( 'sizes', sizes );
+			image.setAttribute( 'sizes', sizes );
 		}
 
-		theImage.replaceWith( theClone );
+		if ( ! srcset ) {
+			image.removeAttribute( 'srcset' );
+		} else {
+			image.setAttribute( 'srcset', srcset );
+		}
 
 		// Fire an event so that third-party code can perform actions after an image is loaded.
-		theClone.trigger( 'jetpack-lazy-loaded-image' );
+		try {
+			lazyLoadedImageEvent = new Event( 'jetpack-lazy-loaded-image', {
+				bubbles: true,
+				cancelable: true
+			} );
+		} catch ( e ) {
+			lazyLoadedImageEvent = document.createEvent( 'Event' )
+			lazyLoadedImageEvent.initEvent( 'jetpack-lazy-loaded-image', true, true );
+		}
+
+		image.dispatchEvent( lazyLoadedImageEvent );
 	}
 };
 
@@ -865,4 +874,8 @@ var jetpackLazyImagesModule = function( $ ) {
 	}(window, document));
 
 // Let's kick things off now
-jetpackLazyImagesModule( jQuery );
+if ( document.readyState === 'interactive' || document.readyState === "complete" ) {
+	jetpackLazyImagesModule();
+} else {
+	document.addEventListener( 'DOMContentLoaded', jetpackLazyImagesModule );
+}

modules/lazy-images/lazy-images.php

@@ -351,7 +351,7 @@ public function enqueue_assets() {
 				'_inc/build/lazy-images/js/lazy-images.min.js',
 				'modules/lazy-images/js/lazy-images.js'
 			),
-			array( 'jquery' ),
+			array(),
 			JETPACK__VERSION,
 			true
 		);