feat(frontend): replace lazy loading with zibll lazysizes

assets/js/core/pagination.js

@@ -31,9 +31,10 @@
       var failed = false;
       var loadMoreBtn = container.querySelector(".aksrt-load-more-btn, .ajax-next");
       var indicator = container.querySelector(".aksrt-loading-indicator");
-      var observer = null;
-      var iasEnabled = false;
       var successfulAutoLoads = 0;
+      var iasMax = isComment
+        ? ((window.aksrtData && typeof aksrtData.commentIasMax !== "undefined") ? parseInt(aksrtData.commentIasMax, 10) : 0)
+        : ((window.aksrtData && typeof aksrtData.iasMax !== "undefined") ? parseInt(aksrtData.iasMax, 10) : 0);
       var homepagePanel = container.closest("[data-home-tab-panel]");
       var target = homepagePanel || container.previousElementSibling;
       if (!homepagePanel && target && target.classList && target.classList.contains("content-stream__footer")) {
@@ -65,11 +66,6 @@
       }
 
       function stopInfinite(markNomore) {
-        if (observer) {
-          observer.disconnect();
-          observer = null;
-        }
-        iasEnabled = false;
         container.classList.remove("ias-pending");
         if (markNomore && loadMoreBtn) {
           loadMoreBtn.textContent = nomoreText;
@@ -177,8 +173,6 @@
               successfulAutoLoads++;
             }
 
-            if (typeof initLazyLoad === "function") initLazyLoad(target);
-
             if (nextPage > maxPages || !res.data.has_more) {
               stopInfinite(true);
               if (!loadMoreBtn) {
@@ -198,6 +192,17 @@
             if (loadMoreBtn && !loadMoreBtn.classList.contains("ajax-nomore") && !failed) {
               loadMoreBtn.classList.remove("is-loading");
               loadMoreBtn.textContent = triggerText;
+              if (mode === "infinite") {
+                if (iasMax > 0 && successfulAutoLoads >= iasMax) {
+                  stopInfinite(true);
+                } else {
+                  loadMoreBtn.classList.remove("lazyloaded", "lazyloading");
+                  loadMoreBtn.classList.add("lazyload");
+                  if (window.lazySizes && lazySizes.loader) {
+                    lazySizes.loader.checkElems();
+                  }
+                }
+              }
             }
           });
       }
@@ -227,127 +232,28 @@
             window.location.href = archiveUrl.toString();
             return;
           }
+          var fromAuto = loadMoreBtn.dataset.lazyAuto === "1";
+          delete loadMoreBtn.dataset.lazyAuto;
+          if (fromAuto && iasMax > 0 && successfulAutoLoads >= iasMax) {
+            stopInfinite(true);
+            return;
+          }
           // Manual click can recover from a previous auto-load failure.
           failed = false;
-          loadNextPage(false);
+          loadNextPage(fromAuto);
         });
       }
 
-      if (mode === "infinite" && "IntersectionObserver" in window) {
-        if (isComment && window.aksrtData && aksrtData.commentIasAuto === false) {
+      if (mode === "infinite") {
+        if ((isComment && window.aksrtData && aksrtData.commentIasAuto === false) || !hasAjaxConfig()) {
+          loadMoreBtn.classList.remove("lazyload");
+          loadMoreBtn.removeAttribute("lazyload-action");
           return;
         }
-        if (!hasAjaxConfig()) {
-          return;
-        }
-
-        var sentinel = document.createElement("div");
-        sentinel.className = "aksrt-scroll-sentinel";
-        container.appendChild(sentinel);
-        var lazyloadAction = container.dataset.lazyloadAction || "";
-        var iasMax = isComment
-          ? ((window.aksrtData && typeof aksrtData.commentIasMax !== "undefined") ? parseInt(aksrtData.commentIasMax, 10) : 0)
-          : ((window.aksrtData && typeof aksrtData.iasMax !== "undefined") ? parseInt(aksrtData.iasMax, 10) : 0);
-
-        observer = new IntersectionObserver(
-          function (entries) {
-            if (!iasEnabled || failed) return;
-            if (!(entries[0] && entries[0].isIntersecting) || loading) return;
-            if (iasMax > 0 && successfulAutoLoads >= iasMax) {
-              stopInfinite(true);
-              return;
-            }
-            loadNextPage(true);
-          },
-          { rootMargin: "200px" }
-        );
-
-        if (lazyloadAction === "ias") {
-          container.classList.add("ias-pending");
-        }
-
-        // Policy A: do not auto-fire on first paint; wait for real user scroll.
-        var enableOnScroll = function () {
-          if (iasEnabled || failed) return;
-          iasEnabled = true;
-          container.classList.remove("ias-pending");
-          observer.observe(sentinel);
-        };
-        window.addEventListener("scroll", enableOnScroll, { passive: true, once: true });
-        window.addEventListener("touchmove", enableOnScroll, { passive: true, once: true });
-        window.addEventListener("wheel", enableOnScroll, { passive: true, once: true });
+        container.classList.add("ias-pending");
       }
     });
   }
 
-  function activateLazyEl(el) {
-    var src = el.dataset.src;
-    if (!src) return;
-    var tag = (el.tagName || "").toLowerCase();
-    if (tag === "iframe" || tag === "video") {
-      el.src = src;
-      el.classList.remove("aksrt-lazy", "lazyload");
-      el.classList.add("aksrt-loaded", "lazyloaded");
-      return;
-    }
-    // img path with optional skeleton + decode
-    var tempImg = new Image();
-    tempImg.onload = function () {
-      el.src = src;
-      el.classList.remove("aksrt-lazy", "lazyload");
-      el.classList.add("aksrt-loaded", "lazyloaded");
-      var skeleton = el.previousElementSibling;
-      if (skeleton && skeleton.classList.contains("aksrt-skeleton")) {
-        skeleton.remove();
-      }
-    };
-    tempImg.onerror = function () {
-      el.classList.remove("aksrt-lazy", "lazyload");
-      el.classList.add("aksrt-error");
-      var skeleton = el.previousElementSibling;
-      if (skeleton && skeleton.classList.contains("aksrt-skeleton")) {
-        skeleton.remove();
-      }
-    };
-    tempImg.src = src;
-  }
-
-  function initLazyLoad(root) {
-    var scope = root || document;
-    // Images + iframes/videos that use data-src (zibll lazyload / aksrt-lazy).
-    var lazyEls = scope.querySelectorAll(
-      "img.aksrt-lazy, iframe.aksrt-lazy, iframe.lazyload, video.aksrt-lazy, video.lazyload"
-    );
-    if (!lazyEls.length) return;
-
-    if (!("IntersectionObserver" in window)) {
-      lazyEls.forEach(function (el) {
-        activateLazyEl(el);
-      });
-      return;
-    }
-
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
-        if (!entry.isIntersecting) return;
-        var el = entry.target;
-        if (!el.dataset.src) {
-          observer.unobserve(el);
-          return;
-        }
-        activateLazyEl(el);
-        observer.unobserve(el);
-      });
-    }, {
-      rootMargin: "200px 0px",
-      threshold: 0.01
-    });
-
-    lazyEls.forEach(function (el) {
-      observer.observe(el);
-    });
-  }
-
   window.AksrtFrontend.register("aksrt-ajax-pagination", function (root) { initAjaxPagination(root); });
-  window.AksrtFrontend.register("aksrt-lazy-load", function (root) { initLazyLoad(root); });
 })();

assets/js/core/slider.js

@@ -191,7 +191,6 @@
         spaceBetween: spaceBetween,
         parallax: parallax,
         effect: effect,
-        lazy: { loadPrevNext: true },
         autoplay: autoplay,
         speed: speed,
         pagination: pagination,
@@ -199,9 +198,6 @@
         keyboard: keyboard,
         a11y: { prevSlideMessage: "上一张", nextSlideMessage: "下一张" },
         on: {
-          lazyImageReady: function (slideEl, imageEl) {
-            if (imageEl) imageEl.classList.add("lazyloaded");
-          },
           slideChange: function () {
             el.querySelectorAll(".aksrt-dplayer, video").forEach(function (media) {
               if (media.pause) media.pause();
@@ -238,7 +234,7 @@
           var img = slide.querySelector("img");
           var src = img ? (img.dataset.src || img.src) : "";
           if (src) {
-            return '<div class="' + className + '"><img class="aksrt-tilt-thumb" src="' + src + '"></div>';
+            return '<div class="' + className + '"><img' + window.aksrtGetLazyImageAttr('lazy_sider', src, 'aksrt-tilt-thumb') + ' alt=""></div>';
           }
           return "";
         };
@@ -379,4 +375,4 @@
   }
 
   window.AksrtFrontend.register("aksrt-hero-slider", function () { initHeroSlider(); });
-})();
+})();