Feature/5987 lazyload css (#6128)

wp-media · Aug 31, 2023 · bc38579 · bc38579
1 parent 7769dfc
commit bc38579
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 40 deletions.
diff --git a/assets/js/lazyload-css.js b/assets/js/lazyload-css.js
@@ -1,6 +1,7 @@
 function rocket_css_lazyload_launch() {
 
-	const pairs = rocket_pairs || [];
+	const usable_pairs = typeof rocket_pairs === 'undefined' ? [] : rocket_pairs;
+
 
 	const styleElement = document.querySelector('#wpr-lazyload-bg');
 
@@ -9,7 +10,7 @@ function rocket_css_lazyload_launch() {
 	const observer = new IntersectionObserver(entries => {
 		entries.forEach(entry => {
 			if (entry.isIntersecting) {
-				const pairs = rocket_pairs.filter(s => entry.target.matches(s.selector));
+				const pairs = usable_pairs.filter(s => entry.target.matches(s.selector));
 				pairs.map(pair => {
 					if (pair) {
 						styleElement.innerHTML += pair.style;
@@ -26,13 +27,22 @@ function rocket_css_lazyload_launch() {
 		rootMargin: threshold + 'px'
 	});
 
-	function lazyload() {
+	function lazyload(e = []) {
+
+		const pass = e.length === 0 || e.find(e =>  e.type !== 'attributes' || e.attributeName === 'class');
 
+		if(! pass ) {
+			return;
+		}
 
-		pairs.forEach(pair => {
+		usable_pairs.forEach(pair => {
 			try {
+
 				const elements = document.querySelectorAll(pair.selector);
 				elements.forEach(el => {
+					if(el.getAttribute('data-rocket-lazy-bg') === 'loaded') {
+						return;
+					}
 					observer.observe(el);
 					// Save el in the pair object (create a new empty array if it doesn't exist)
 					(pair.elements ||= []).push(el);
@@ -46,27 +56,20 @@ function rocket_css_lazyload_launch() {
 	lazyload();
 
 	const observe_DOM = (function(){
-		const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+		const MutationObserver = window.MutationObserver;
 
 		return function( obj, callback ){
 			if( !obj || obj.nodeType !== 1 ) return;
 
-			if( MutationObserver ){
-				// define a new observer
-				const mutationObserver = new MutationObserver(callback);
+			// define a new observer
+			const mutationObserver = new MutationObserver(callback);
 
-				// have the observer observe for changes in children
-				mutationObserver.observe( obj, { attributes: true, childList:true, subtree:true })
-				return mutationObserver
-			}
+			// have the observer observe for changes in children
+			mutationObserver.observe( obj, { attributes: true, childList:true, subtree:true })
+			return mutationObserver
 
-			// browser support fallback
-			else if( window.addEventListener ){
-				obj.addEventListener('DOMNodeInserted', callback, false)
-				obj.addEventListener('DOMNodeRemoved', callback, false)
-				obj.addEventListener('DOMSubtreeModified', callback, false)
-			}
 		}
+
 	})()
 
 	const body = document.querySelector('body');

diff --git a/assets/js/lazyload-css.min.js b/assets/js/lazyload-css.min.js
diff --git a/assets/js/lazyload-css.min.js.map b/assets/js/lazyload-css.min.js.map
diff --git a/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php b/inc/Engine/Media/Lazyload/CSS/Front/Extractor.php
@@ -133,7 +133,7 @@ protected function extract_urls( string $content ): array {
 				continue;
 			}
 
-			if ( ! $this->is_url_external( $url ) ) {
+			if ( ! $this->is_url_external( $url ) && ! $this->is_relative( $url ) ) {
 				$url = $this->apply_string_filter( 'css_url', $url );
 			}
 
@@ -193,7 +193,7 @@ protected function is_url_ignored( string $url, array $ignored_urls ): bool {
 	protected function make_url_complete( string $url ): string {
 		$host = wp_parse_url( $url, PHP_URL_HOST );
 
-		if ( $host ) {
+		if ( $host || $this->is_relative( $url ) ) {
 			return $url;
 		}
 
@@ -217,4 +217,14 @@ protected function is_url_external( string $url ): bool {
 
 		return $host !== $home_host;
 	}
+
+	/**
+	 * Check if the URL is relative.
+	 *
+	 * @param string $url URL to check.
+	 * @return bool
+	 */
+	protected function is_relative( string $url ): bool {
+		return preg_match( '/^\./', $url );
+	}
 }
diff --git a/src/js/global/lazyload-css.js b/src/js/global/lazyload-css.js
@@ -1,6 +1,7 @@
 function rocket_css_lazyload_launch() {
 
-	const pairs = rocket_pairs || [];
+	const usable_pairs = typeof rocket_pairs === 'undefined' ? [] : rocket_pairs;
+
 
 	const styleElement = document.querySelector('#wpr-lazyload-bg');
 
@@ -9,7 +10,7 @@ function rocket_css_lazyload_launch() {
 	const observer = new IntersectionObserver(entries => {
 		entries.forEach(entry => {
 			if (entry.isIntersecting) {
-				const pairs = rocket_pairs.filter(s => entry.target.matches(s.selector));
+				const pairs = usable_pairs.filter(s => entry.target.matches(s.selector));
 				pairs.map(pair => {
 					if (pair) {
 						styleElement.innerHTML += pair.style;
@@ -26,13 +27,22 @@ function rocket_css_lazyload_launch() {
 		rootMargin: threshold + 'px'
 	});
 
-	function lazyload() {
+	function lazyload(e = []) {
+
+		const pass = e.length === 0 || e.find(e =>  e.type !== 'attributes' || e.attributeName === 'class');
 
+		if(! pass ) {
+			return;
+		}
 
-		pairs.forEach(pair => {
+		usable_pairs.forEach(pair => {
 			try {
+
 				const elements = document.querySelectorAll(pair.selector);
 				elements.forEach(el => {
+					if(el.getAttribute('data-rocket-lazy-bg') === 'loaded') {
+						return;
+					}
 					observer.observe(el);
 					// Save el in the pair object (create a new empty array if it doesn't exist)
 					(pair.elements ||= []).push(el);
@@ -46,27 +56,20 @@ function rocket_css_lazyload_launch() {
 	lazyload();
 
 	const observe_DOM = (function(){
-		const MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
+		const MutationObserver = window.MutationObserver;
 
 		return function( obj, callback ){
 			if( !obj || obj.nodeType !== 1 ) return;
 
-			if( MutationObserver ){
-				// define a new observer
-				const mutationObserver = new MutationObserver(callback);
+			// define a new observer
+			const mutationObserver = new MutationObserver(callback);
 
-				// have the observer observe for changes in children
-				mutationObserver.observe( obj, { attributes: true, childList:true, subtree:true })
-				return mutationObserver
-			}
+			// have the observer observe for changes in children
+			mutationObserver.observe( obj, { attributes: true, childList:true, subtree:true })
+			return mutationObserver
 
-			// browser support fallback
-			else if( window.addEventListener ){
-				obj.addEventListener('DOMNodeInserted', callback, false)
-				obj.addEventListener('DOMNodeRemoved', callback, false)
-				obj.addEventListener('DOMSubtreeModified', callback, false)
-			}
 		}
+
 	})()
 
 	const body = document.querySelector('body');