Added support for Native lazyloading API

includes/CitizenHooks.php

@@ -32,14 +32,31 @@ class CitizenHooks {
 		return true;
 	}
 
+
+	public static function onOutputPageBeforeHTML( &$out, &$text ) {
+
+		return true;
+	}
+
 	/**
 	 * Lazyload images
 	 * Modified from the Lazyload extension
+	 * Looks for thumbnail and swap src to data-src
 	 */
 	public static function ThumbnailBeforeProduceHTML($thumb, &$attribs, &$linkAttribs) {
+
+		$file = $thumb->getFile();
+
+		if ( $file ) {
 			global $wgRequest, $wgTitle;
 			if (defined('MW_API') && $wgRequest->getVal('action') === 'parse') return true;
 			if (isset($wgTitle) && $wgTitle->getNamespace() === NS_FILE) return true;
+
+			// Set lazy class for the img
+			$attribs['class'] = 'lazy';
+			// Native API
+			$attribs['loading'] = 'lazy';
+			
 			$attribs['data-src'] = $attribs['src'];
 
 			$attribs['src'] = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
@@ -47,6 +64,7 @@ class CitizenHooks {
 					$attribs['data-srcset'] = $attribs['srcset'];
 					unset($attribs['srcset']);
 			}
+		}
 		return true;
 	}
 }

resources/scripts/lazyload.js

@@ -5,25 +5,34 @@
  * Lazyloading images with Native API or IntersectionObserver
  */
 
-// TODO: Implement Native API 
 
-// IntersectionObserver API
-if( typeof IntersectionObserver !== "undefined" && "forEach" in NodeList.prototype ) {
+// Native API
+if ("loading" in HTMLImageElement.prototype) {
+    document.querySelectorAll("img.lazy").forEach(function(img) {
+        img.setAttribute("src", img.getAttribute("data-src"));
+        if (img.hasAttribute("data-srcset")) {
+            img.setAttribute("srcset", img.getAttribute("data-srcset"));
+        }
+    });
+} else {
+    // IntersectionObserver API
+    if (typeof IntersectionObserver !== "undefined" && "forEach" in NodeList.prototype) {
         var observer = new IntersectionObserver(function(changes) {
             if ("connection" in navigator && navigator.connection.saveData === true) {
                 return;
             }
             changes.forEach(function(change) {
-            if(change.isIntersecting) {
+                if (change.isIntersecting) {
                     change.target.setAttribute("src", change.target.getAttribute("data-src"));
-                if(change.target.hasAttribute("data-srcset")) {
+                    if (change.target.hasAttribute("data-srcset")) {
                         change.target.setAttribute("srcset", change.target.getAttribute("data-srcset"));
                     }
                     observer.unobserve(change.target);
                 }
             });
         });
-    document.querySelectorAll("img[data-src]").forEach(function(img) {
+        document.querySelectorAll("img.lazy").forEach(function(img) {
             observer.observe(img);
         });
+    }
 }

skin.json

@@ -216,6 +216,9 @@
 		"BeforePageDisplay": [
 			"CitizenHooks::BeforePageDisplay"
 		],
+		"onOutputPageBeforeHTML": [
+			"CitizenHooks::onOutputPageBeforeHTML"
+		],
 		"ThumbnailBeforeProduceHTML": [
 			"CitizenHooks::ThumbnailBeforeProduceHTML"
 		]

skinStyles/ext.translate.tag.languages.less

@@ -9,6 +9,7 @@
 .mw-pt-languages {
     display: block;
     border: 0;
+    width: auto;
     background: 0;
     margin: 0 @negative-margin;
     padding: @margin-side;
@@ -34,7 +35,7 @@
     width: auto;
     visibility: hidden; // Hide dots
 
-	> * {
+    >* {
         visibility: visible;
     }
 }
@@ -42,10 +43,10 @@
 .mw-pt-languages-selected,
 .mw-pt-languages-ui {
     font-weight: 400;
-	.boxshadow(2)!important;
+    .boxshadow(2) !important;
 
     &:hover {
-		transform: none!important;
+        transform: none !important;
     }
 }
 
@@ -73,7 +74,8 @@
 
 .mw-pt-progress--low {
     background: @red-50;
-	border-color: @red-50;;
+    border-color: @red-50;
+    ;
     color: @base-100;
 }
 
@@ -97,13 +99,13 @@
 
 @media only screen and (max-width: @screen1) {
     .mw-pt-languages {
-		margin: 0!important; // somehow got overrided
+        margin: 0 !important; // somehow got overrided
         padding: @margin-side 0;
     }
 }
 
 @media only screen and (max-width: @screen2) {
     .mw-pt-languages {
-		margin: 0 ~"calc((100vw - @{page-width}) / -2)";
+        margin: 0~"calc((100vw - @{page-width}) / -2)";
     }
 }