feat(frontend): replace lazy loading with zibll lazysizes

2026-08-18 01:33:38 +08:00
parent 02571eecd6
commit 435ee1daa7
78 changed files with 1515 additions and 909 deletions
@@ -734,27 +734,6 @@
      });
    });

-    // Lazy images
-    root.querySelectorAll('img.aksrt-lazy[data-src]').forEach(function (img) {
-      if (img.classList.contains('aksrt-loaded')) return;
-      if ('IntersectionObserver' in window) {
-        var obs = new IntersectionObserver(function (entries) {
-          entries.forEach(function (entry) {
-            if (!entry.isIntersecting) return;
-            img.src = img.dataset.src;
-            img.classList.remove('aksrt-lazy');
-            img.classList.add('aksrt-loaded');
-            obs.unobserve(img);
-          });
-        }, { rootMargin: '200px' });
-        obs.observe(img);
-      } else {
-        img.src = img.dataset.src;
-        img.classList.remove('aksrt-lazy');
-        img.classList.add('aksrt-loaded');
-      }
-    });
-
    // Swiper re-init
    if (typeof Swiper !== 'undefined') {
      root.querySelectorAll('[data-swiper-config]:not(.swiper-initialized)').forEach(function (el) {
@@ -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); });
 })();
@@ -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(); });
-})();
+})();
@@ -597,7 +597,7 @@
 							var item = document.createElement('button');
 							item.type = 'button';
 							item.className = 'uc-transfer-user';
-							item.innerHTML = '<img src="' + (u.avatar || '') + '" alt="" class="uc-transfer-user__avatar"><span>' + (u.display_name || u.user_login) + '</span><span class="muted-2-color em09">@' + (u.user_login || '') + '</span>';
+							item.innerHTML = '<img' + window.aksrtGetLazyImageAttr('lazy_avatar', u.avatar || '', 'uc-transfer-user__avatar', 'sm') + ' alt=""><span>' + (u.display_name || u.user_login) + '</span><span class="muted-2-color em09">@' + (u.user_login || '') + '</span>';
 							item.addEventListener('click', function () {
 								if (recipientInput) recipientInput.value = String(u.id);
 								if (selected) selected.textContent = '已选择：' + (u.display_name || u.user_login);
@@ -106,7 +106,7 @@
  var currentZoom = 1;
  var autoplayTimer = null;
  var isAutoplay = false;
-  var EXCLUDE_SEL = '.no-imgbox,.no-lightbox,.avatar,.img-icon,.avatar-badge,.smilie-icon,.aksrt-avatar,.aksrt-lazy-skeleton';
+  var EXCLUDE_SEL = '.no-imgbox,.no-lightbox,.avatar,.img-icon,.avatar-badge,.smilie-icon,.aksrt-avatar';
  var TRIGGER_SEL = '.entry-content img, .wp-posts-content img, .aksrt-lightbox-trigger img, [data-aksrt-lightbox] img, .imgbox-container img, .comment-content .box-img img, a[data-imgbox] img';
  var CONTAINER_SEL = '.entry-content, .wp-posts-content, .aksrt-lightbox-trigger, [data-aksrt-lightbox], .imgbox-container, .comment-content';
  var MAX_ZOOM_DESKTOP = 2;
@@ -276,32 +276,9 @@
  /** Generic remote-box / lazyload-action=ias (zibll-compatible). */
  function bindRemoteBoxes(root) {
    (root || document).querySelectorAll("[remote-box]").forEach(function (box) {
-      var form = box.closest("form");
-      if (form) {
-        form.addEventListener(
-          "mouseenter",
-          function () {
-            loadRemote(box);
-          },
-          { once: true }
-        );
-        form.addEventListener(
-          "focusin",
-          function () {
-            loadRemote(box);
-          },
-          { once: true }
-        );
-      }
-      if ("requestIdleCallback" in window) {
-        requestIdleCallback(function () {
-          loadRemote(box);
-        });
-      } else {
-        setTimeout(function () {
-          loadRemote(box);
-        }, 600);
-      }
+      if (box.dataset.aksrtRemoteBound === "1") return;
+      box.dataset.aksrtRemoteBound = "1";
+      box.addEventListener("click", function () { loadRemote(box); });
    });
  }

@@ -226,53 +226,6 @@
 		return wrapper;
 	}

-	function hydrateLazyImages(scope) {
-		var lazyImages = (scope || document).querySelectorAll('img.aksrt-lazy');
-		if (!lazyImages.length) return;
-
-		if (!('IntersectionObserver' in window)) {
-			lazyImages.forEach(function (img) {
-				var src = img.dataset.src;
-				if (src) {
-					img.src = src;
-					img.classList.remove('aksrt-lazy');
-					img.classList.add('aksrt-loaded');
-				}
-				var skeleton = img.previousElementSibling;
-				if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
-			});
-			return;
-		}
-
-		var observer = new IntersectionObserver(function (entries) {
-			entries.forEach(function (entry) {
-				if (!entry.isIntersecting) return;
-				var img = entry.target;
-				var src = img.dataset.src;
-				if (!src) { observer.unobserve(img); return; }
-
-				var tempImg = new Image();
-				tempImg.onload = function () {
-					img.src = src;
-					img.classList.remove('aksrt-lazy');
-					img.classList.add('aksrt-loaded');
-					var skeleton = img.previousElementSibling;
-					if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
-				};
-				tempImg.onerror = function () {
-					img.classList.remove('aksrt-lazy');
-					img.classList.add('aksrt-error');
-					var skeleton = img.previousElementSibling;
-					if (skeleton && skeleton.classList.contains('aksrt-skeleton')) skeleton.remove();
-				};
-				tempImg.src = src;
-				observer.unobserve(img);
-			});
-		}, { rootMargin: '200px 0px', threshold: 0.01 });
-
-		lazyImages.forEach(function (img) { observer.observe(img); });
-	}
-
 	/**
 	 * Hydrate a panel after AJAX content injection.
 	 * Sets data-view, re-binds lazy images, and dispatches events.
@@ -285,7 +238,6 @@
 				postsContainer.setAttribute('data-view', viewMode || getDefaultView());
 			}

-		hydrateLazyImages(panel);
 		dispatchRenderedEvent(panel, {
 			viewMode: viewMode || getDefaultView(),
 			panel: panel.getAttribute('data-home-tab-panel') || ''
@@ -0,0 +1,870 @@
+//lazySizes
+(function (window, factory) {
+    var lazySizes = factory(window, window.document, Date);
+    window.lazySizes = lazySizes;
+    if (typeof module == 'object' && module.exports) {
+        module.exports = lazySizes;
+    }
+})(typeof window != 'undefined' ? window : {}, function l(window, document, Date) {
+    // Pass in the windoe Date function also for SSR because the Date class can be lost
+    'use strict';
+    /*jshint eqnull:true */
+
+    var lazysizes, lazySizesCfg;
+
+    (function () {
+        var prop;
+
+        var lazySizesDefaults = {
+            lazyClass: 'lazyload',
+            loadedClass: 'lazyloaded',
+            loadingClass: 'lazyloading',
+            preloadClass: 'lazypreload',
+            loadafterClass: 'lazyloadafter',
+            errorClass: 'lazyerror',
+            //strictClass: 'lazystrict',
+            autosizesClass: 'lazyautosizes',
+            srcAttr: 'data-src',
+            srcsetAttr: 'data-srcset',
+            sizesAttr: 'data-sizes',
+            //preloadAfterLoad: false,
+            minSize: 40,
+            customMedia: {},
+            init: true,
+            expFactor: 1.5,
+            hFac: 0.8,
+            loadMode: 2,
+            loadHidden: true,
+            ricTimeout: 0,
+            throttleDelay: 125,
+        };
+
+        lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};
+
+        for (prop in lazySizesDefaults) {
+            if (!(prop in lazySizesCfg)) {
+                lazySizesCfg[prop] = lazySizesDefaults[prop];
+            }
+        }
+    })();
+
+    if (!document || !document.getElementsByClassName) {
+        return {
+            init: function () {},
+            cfg: lazySizesCfg,
+            noSupport: true,
+        };
+    }
+
+    var docElem = document.documentElement;
+
+    var supportPicture = window.HTMLPictureElement;
+
+    var _addEventListener = 'addEventListener';
+
+    var _getAttribute = 'getAttribute';
+
+    /**
+     * Update to bind to window because 'this' becomes null during SSR
+     * builds.
+     */
+    var addEventListener = window[_addEventListener].bind(window);
+
+    var setTimeout = window.setTimeout;
+
+    var requestAnimationFrame = window.requestAnimationFrame || setTimeout;
+
+    var requestIdleCallback = window.requestIdleCallback;
+
+    var regPicture = /^picture$/i;
+
+    var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];
+
+    var regClassCache = {};
+
+    var forEach = Array.prototype.forEach;
+
+    var hasClass = function (ele, cls) {
+        if (!regClassCache[cls]) {
+            regClassCache[cls] = new RegExp('(\\s|^)' + cls + '(\\s|$)');
+        }
+        return regClassCache[cls].test(ele[_getAttribute]('class') || '') && regClassCache[cls];
+    };
+
+    var addClass = function (ele, cls) {
+        if (!hasClass(ele, cls)) {
+            ele.setAttribute('class', (ele[_getAttribute]('class') || '').trim() + ' ' + cls);
+        }
+    };
+
+    var removeClass = function (ele, cls) {
+        var reg;
+        if ((reg = hasClass(ele, cls))) {
+            ele.setAttribute('class', (ele[_getAttribute]('class') || '').replace(reg, ' '));
+        }
+    };
+
+    var addRemoveLoadEvents = function (dom, fn, add) {
+        var action = add ? _addEventListener : 'removeEventListener';
+        if (add) {
+            addRemoveLoadEvents(dom, fn);
+        }
+        loadEvents.forEach(function (evt) {
+            dom[action](evt, fn);
+        });
+    };
+
+    var triggerEvent = function (elem, name, detail, noBubbles, noCancelable) {
+        var event = document.createEvent('Event');
+
+        if (!detail) {
+            detail = {};
+        }
+
+        detail.instance = lazysizes;
+
+        event.initEvent(name, !noBubbles, !noCancelable);
+
+        event.detail = detail;
+
+        elem.dispatchEvent(event);
+        return event;
+    };
+
+    var updatePolyfill = function (el, full) {
+        var polyfill;
+        if (!supportPicture && (polyfill = window.picturefill || lazySizesCfg.pf)) {
+            if (full && full.src && !el[_getAttribute]('srcset')) {
+                el.setAttribute('srcset', full.src);
+            }
+            polyfill({ reevaluate: true, elements: [el] });
+        } else if (full && full.src) {
+            el.src = full.src;
+        }
+    };
+
+    var getCSS = function (elem, style) {
+        return (getComputedStyle(elem, null) || {})[style];
+    };
+
+    var getWidth = function (elem, parent, width) {
+        width = width || elem.offsetWidth;
+
+        while (width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth) {
+            width = parent.offsetWidth;
+            parent = parent.parentNode;
+        }
+
+        return width;
+    };
+
+    var rAF = (function () {
+        var running, waiting;
+        var firstFns = [];
+        var secondFns = [];
+        var fns = firstFns;
+
+        var run = function () {
+            var runFns = fns;
+
+            fns = firstFns.length ? secondFns : firstFns;
+
+            running = true;
+            waiting = false;
+
+            while (runFns.length) {
+                runFns.shift()();
+            }
+
+            running = false;
+        };
+
+        var rafBatch = function (fn, queue) {
+            if (running && !queue) {
+                fn.apply(this, arguments);
+            } else {
+                fns.push(fn);
+
+                if (!waiting) {
+                    waiting = true;
+                    (document.hidden ? setTimeout : requestAnimationFrame)(run);
+                }
+            }
+        };
+
+        rafBatch._lsFlush = run;
+
+        return rafBatch;
+    })();
+
+    var rAFIt = function (fn, simple) {
+        return simple
+            ? function () {
+                  rAF(fn);
+              }
+            : function () {
+                  var that = this;
+                  var args = arguments;
+                  rAF(function () {
+                      fn.apply(that, args);
+                  });
+              };
+    };
+
+    var throttle = function (fn) {
+        var running;
+        var lastTime = 0;
+        var gDelay = lazySizesCfg.throttleDelay;
+        var rICTimeout = lazySizesCfg.ricTimeout;
+        var run = function () {
+            running = false;
+            lastTime = Date.now();
+            fn();
+        };
+        var idleCallback =
+            requestIdleCallback && rICTimeout > 49
+                ? function () {
+                      requestIdleCallback(run, { timeout: rICTimeout });
+
+                      if (rICTimeout !== lazySizesCfg.ricTimeout) {
+                          rICTimeout = lazySizesCfg.ricTimeout;
+                      }
+                  }
+                : rAFIt(function () {
+                      setTimeout(run);
+                  }, true);
+        return function (isPriority) {
+            var delay;
+
+            if ((isPriority = isPriority === true)) {
+                rICTimeout = 33;
+            }
+
+            if (running) {
+                return;
+            }
+
+            running = true;
+
+            delay = gDelay - (Date.now() - lastTime);
+
+            if (delay < 0) {
+                delay = 0;
+            }
+
+            if (isPriority || delay < 9) {
+                idleCallback();
+            } else {
+                setTimeout(idleCallback, delay);
+            }
+        };
+    };
+
+    //based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html
+    var debounce = function (func) {
+        var timeout, timestamp;
+        var wait = 99;
+        var run = function () {
+            timeout = null;
+            func();
+        };
+        var later = function () {
+            var last = Date.now() - timestamp;
+
+            if (last < wait) {
+                setTimeout(later, wait - last);
+            } else {
+                (requestIdleCallback || run)(run);
+            }
+        };
+
+        return function () {
+            timestamp = Date.now();
+
+            if (!timeout) {
+                timeout = setTimeout(later, wait);
+            }
+        };
+    };
+
+    var loader = (function () {
+        var preloadElems, isCompleted, resetPreloadingTimer, loadMode, started;
+
+        var eLvW, elvH, eLtop, eLleft, eLright, eLbottom, isBodyHidden;
+
+        var regImg = /^img$/i;
+        var regIframe = /^iframe$/i;
+
+        var supportScroll = 'onscroll' in window && !/(gle|ing)bot/.test(navigator.userAgent);
+
+        var shrinkExpand = 0;
+        var currentExpand = 0;
+
+        var isLoading = 0;
+        var lowRuns = -1;
+
+        var resetPreloading = function (e) {
+            isLoading--;
+            if (!e || isLoading < 0 || !e.target) {
+                isLoading = 0;
+            }
+        };
+
+        var isVisible = function (elem) {
+            if (isBodyHidden == null) {
+                isBodyHidden = getCSS(document.body, 'visibility') == 'hidden';
+            }
+
+            return isBodyHidden || !(getCSS(elem.parentNode, 'visibility') == 'hidden' && getCSS(elem, 'visibility') == 'hidden');
+        };
+
+        var isNestedVisible = function (elem, elemExpand) {
+            var outerRect;
+            var parent = elem;
+            var visible = isVisible(elem);
+
+            eLtop -= elemExpand;
+            eLbottom += elemExpand;
+            eLleft -= elemExpand;
+            eLright += elemExpand;
+
+            while (visible && (parent = parent.offsetParent) && parent != document.body && parent != docElem) {
+                visible = (getCSS(parent, 'opacity') || 1) > 0;
+
+                if (visible && getCSS(parent, 'overflow') != 'visible') {
+                    outerRect = parent.getBoundingClientRect();
+                    visible = eLright > outerRect.left && eLleft < outerRect.right && eLbottom > outerRect.top - 1 && eLtop < outerRect.bottom + 1;
+                }
+            }
+
+            return visible;
+        };
+
+        var checkElements = function () {
+            var eLlen, i, rect, autoLoadElem, loadedSomething, elemExpand, elemNegativeExpand, elemExpandVal, beforeExpandVal, defaultExpand, preloadExpand, hFac;
+            var lazyloadElems = lazysizes.elements;
+
+            if ((loadMode = lazySizesCfg.loadMode) && isLoading < 8 && (eLlen = lazyloadElems.length)) {
+                i = 0;
+
+                lowRuns++;
+
+                for (; i < eLlen; i++) {
+                    if (!lazyloadElems[i] || lazyloadElems[i]._lazyRace) {
+                        continue;
+                    }
+
+                    if (!supportScroll || (lazysizes.prematureUnveil && lazysizes.prematureUnveil(lazyloadElems[i]))) {
+                        unveilElement(lazyloadElems[i]);
+                        continue;
+                    }
+
+                    if (!(elemExpandVal = lazyloadElems[i][_getAttribute]('data-expand')) || !(elemExpand = elemExpandVal * 1)) {
+                        elemExpand = currentExpand;
+                    }
+
+                    if (!defaultExpand) {
+                        defaultExpand = !lazySizesCfg.expand || lazySizesCfg.expand < 1 ? (docElem.clientHeight > 500 && docElem.clientWidth > 500 ? 500 : 370) : lazySizesCfg.expand;
+
+                        lazysizes._defEx = defaultExpand;
+
+                        preloadExpand = defaultExpand * lazySizesCfg.expFactor;
+                        hFac = lazySizesCfg.hFac;
+                        isBodyHidden = null;
+
+                        if (currentExpand < preloadExpand && isLoading < 1 && lowRuns > 2 && loadMode > 2 && !document.hidden) {
+                            currentExpand = preloadExpand;
+                            lowRuns = 0;
+                        } else if (loadMode > 1 && lowRuns > 1 && isLoading < 6) {
+                            currentExpand = defaultExpand;
+                        } else {
+                            currentExpand = shrinkExpand;
+                        }
+                    }
+
+                    if (beforeExpandVal !== elemExpand) {
+                        eLvW = innerWidth + elemExpand * hFac;
+                        elvH = innerHeight + elemExpand;
+                        elemNegativeExpand = elemExpand * -1;
+                        beforeExpandVal = elemExpand;
+                    }
+
+                    rect = lazyloadElems[i].getBoundingClientRect();
+
+                    if ((eLbottom = rect.bottom) >= elemNegativeExpand && (eLtop = rect.top) <= elvH && (eLright = rect.right) >= elemNegativeExpand * hFac && (eLleft = rect.left) <= eLvW && (eLbottom || eLright || eLleft || eLtop) && (lazySizesCfg.loadHidden || isVisible(lazyloadElems[i])) && ((isCompleted && isLoading < 3 && !elemExpandVal && (loadMode < 3 || lowRuns < 4)) || isNestedVisible(lazyloadElems[i], elemExpand))) {
+                        unveilElement(lazyloadElems[i]);
+                        loadedSomething = true;
+                        if (isLoading > 9) {
+                            break;
+                        }
+                    } else if (!loadedSomething && isCompleted && !autoLoadElem && isLoading < 4 && lowRuns < 4 && loadMode > 2 && (preloadElems[0] || lazySizesCfg.preloadAfterLoad) && (preloadElems[0] || (!elemExpandVal && (eLbottom || eLright || eLleft || eLtop || lazyloadElems[i][_getAttribute](lazySizesCfg.sizesAttr) != 'auto')))) {
+                        autoLoadElem = preloadElems[0] || lazyloadElems[i];
+                    }
+                }
+
+                if (autoLoadElem && !loadedSomething) {
+                    unveilElement(autoLoadElem);
+                }
+            }
+        };
+
+        var throttledCheckElements = throttle(checkElements);
+
+        var switchLoadingClass = function (e) {
+            var elem = e.target;
+
+            if (elem._lazyCache) {
+                delete elem._lazyCache;
+                return;
+            }
+
+            resetPreloading(e);
+            addClass(elem, lazySizesCfg.loadedClass);
+            removeClass(elem, lazySizesCfg.loadingClass);
+            addRemoveLoadEvents(elem, rafSwitchLoadingClass);
+            triggerEvent(elem, 'lazyloaded');
+
+            //添加loadafterClass，防止后期二次触发动画
+            setTimeout(function () {
+                addClass(elem, lazySizesCfg.loadafterClass);
+            }, 700);
+        };
+        var rafedSwitchLoadingClass = rAFIt(switchLoadingClass);
+        var rafSwitchLoadingClass = function (e) {
+            rafedSwitchLoadingClass({ target: e.target });
+        };
+
+        var changeIframeSrc = function (elem, src) {
+            try {
+                elem.contentWindow.location.replace(src);
+            } catch (e) {
+                elem.src = src;
+            }
+        };
+
+        var handleSources = function (source) {
+            var customMedia;
+
+            var sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr);
+
+            if ((customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')])) {
+                source.setAttribute('media', customMedia);
+            }
+
+            if (sourceSrcset) {
+                source.setAttribute('srcset', sourceSrcset);
+            }
+        };
+
+        var lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg) {
+            var src, srcset, parent, isPicture, event, firesLoad;
+
+            if (!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented) {
+                if (sizes) {
+                    if (isAuto) {
+                        addClass(elem, lazySizesCfg.autosizesClass);
+                    } else {
+                        elem.setAttribute('sizes', sizes);
+                    }
+                }
+
+                srcset = elem[_getAttribute](lazySizesCfg.srcsetAttr);
+                src = elem[_getAttribute](lazySizesCfg.srcAttr);
+
+                if (isImg) {
+                    parent = elem.parentNode;
+                    isPicture = parent && regPicture.test(parent.nodeName || '');
+                }
+
+                firesLoad = detail.firesLoad || ('src' in elem && (srcset || src || isPicture));
+
+                event = { target: elem };
+
+                addClass(elem, lazySizesCfg.loadingClass);
+
+                if (firesLoad) {
+                    clearTimeout(resetPreloadingTimer);
+                    resetPreloadingTimer = setTimeout(resetPreloading, 2500);
+                    addRemoveLoadEvents(elem, rafSwitchLoadingClass, true);
+                }
+
+                if (isPicture) {
+                    forEach.call(parent.getElementsByTagName('source'), handleSources);
+                }
+
+                if (srcset) {
+                    elem.setAttribute('srcset', srcset);
+                } else if (src && !isPicture) {
+                    if (regIframe.test(elem.nodeName)) {
+                        changeIframeSrc(elem, src);
+                    } else {
+                        elem.src = src;
+                    }
+                }
+
+                if (isImg && (srcset || isPicture)) {
+                    updatePolyfill(elem, { src: src });
+                }
+            }
+
+            if (elem._lazyRace) {
+                delete elem._lazyRace;
+            }
+            removeClass(elem, lazySizesCfg.lazyClass);
+
+            rAF(function () {
+                // Part of this can be removed as soon as this fix is older: https://bugs.chromium.org/p/chromium/issues/detail?id=7731 (2015)
+                var isLoaded = elem.complete && elem.naturalWidth > 1;
+
+                if (!firesLoad || isLoaded) {
+                    if (isLoaded) {
+                        addClass(elem, 'ls-is-cached');
+                    }
+                    switchLoadingClass(event);
+                    elem._lazyCache = true;
+                    setTimeout(function () {
+                        if ('_lazyCache' in elem) {
+                            delete elem._lazyCache;
+                        }
+                    }, 9);
+                }
+                if (elem.loading == 'lazy') {
+                    isLoading--;
+                }
+            }, true);
+        });
+
+        var unveilElement = function (elem) {
+            if (elem._lazyRace) {
+                return;
+            }
+            var detail;
+
+            var isImg = regImg.test(elem.nodeName);
+
+            //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw")
+            var sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes'));
+            var isAuto = sizes == 'auto';
+
+            if ((isAuto || !isCompleted) && isImg && (elem[_getAttribute]('src') || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass) && hasClass(elem, lazySizesCfg.lazyClass)) {
+                return;
+            }
+
+            detail = triggerEvent(elem, 'lazyunveilread').detail;
+
+            if (isAuto) {
+                autoSizer.updateElem(elem, true, elem.offsetWidth);
+            }
+
+            elem._lazyRace = true;
+            isLoading++;
+
+            lazyUnveil(elem, detail, isAuto, sizes, isImg);
+        };
+
+        var afterScroll = debounce(function () {
+            lazySizesCfg.loadMode = 3;
+            throttledCheckElements();
+        });
+
+        var altLoadmodeScrollListner = function () {
+            if (lazySizesCfg.loadMode == 3) {
+                lazySizesCfg.loadMode = 2;
+            }
+            afterScroll();
+        };
+
+        var onload = function () {
+            if (isCompleted) {
+                return;
+            }
+            if (Date.now() - started < 999) {
+                setTimeout(onload, 999);
+                return;
+            }
+
+            isCompleted = true;
+
+            lazySizesCfg.loadMode = 3;
+
+            throttledCheckElements();
+
+            addEventListener('scroll', altLoadmodeScrollListner, true);
+        };
+
+        return {
+            _: function () {
+                started = Date.now();
+
+                lazysizes.elements = document.getElementsByClassName(lazySizesCfg.lazyClass);
+                preloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass + ' ' + lazySizesCfg.preloadClass);
+
+                addEventListener('scroll', throttledCheckElements, true);
+
+                addEventListener('resize', throttledCheckElements, true);
+
+                addEventListener('pageshow', function (e) {
+                    if (e.persisted) {
+                        var loadingElements = document.querySelectorAll('.' + lazySizesCfg.loadingClass);
+
+                        if (loadingElements.length && loadingElements.forEach) {
+                            requestAnimationFrame(function () {
+                                loadingElements.forEach(function (img) {
+                                    if (img.complete) {
+                                        unveilElement(img);
+                                    }
+                                });
+                            });
+                        }
+                    }
+                });
+
+                if (window.MutationObserver) {
+                    new MutationObserver(throttledCheckElements).observe(docElem, { childList: true, subtree: true, attributes: true });
+                } else {
+                    docElem[_addEventListener]('DOMNodeInserted', throttledCheckElements, true);
+                    docElem[_addEventListener]('DOMAttrModified', throttledCheckElements, true);
+                    setInterval(throttledCheckElements, 999);
+                }
+
+                addEventListener('hashchange', throttledCheckElements, true);
+
+                //, 'fullscreenchange'
+                ['focus', 'mouseover', 'click', 'load', 'transitionend', 'animationend'].forEach(function (name) {
+                    document[_addEventListener](name, throttledCheckElements, true);
+                });
+
+                if (/d$|^c/.test(document.readyState)) {
+                    onload();
+                } else {
+                    addEventListener('load', onload);
+                    document[_addEventListener]('DOMContentLoaded', throttledCheckElements);
+                    setTimeout(onload, 20000);
+                }
+
+                if (lazysizes.elements.length) {
+                    checkElements();
+                    rAF._lsFlush();
+                } else {
+                    throttledCheckElements();
+                }
+            },
+            checkElems: throttledCheckElements,
+            unveil: unveilElement,
+            _aLSL: altLoadmodeScrollListner,
+        };
+    })();
+
+    var autoSizer = (function () {
+        var autosizesElems;
+
+        var sizeElement = rAFIt(function (elem, parent, event, width) {
+            var sources, i, len;
+            elem._lazysizesWidth = width;
+            width += 'px';
+
+            elem.setAttribute('sizes', width);
+
+            if (regPicture.test(parent.nodeName || '')) {
+                sources = parent.getElementsByTagName('source');
+                for (i = 0, len = sources.length; i < len; i++) {
+                    sources[i].setAttribute('sizes', width);
+                }
+            }
+
+            if (!event.detail.dataAttr) {
+                updatePolyfill(elem, event.detail);
+            }
+        });
+        var getSizeElement = function (elem, dataAttr, width) {
+            var event;
+            var parent = elem.parentNode;
+
+            if (parent) {
+                width = getWidth(elem, parent, width);
+                event = triggerEvent(elem, 'lazybeforesizes', { width: width, dataAttr: !!dataAttr });
+
+                if (!event.defaultPrevented) {
+                    width = event.detail.width;
+
+                    if (width && width !== elem._lazysizesWidth) {
+                        sizeElement(elem, parent, event, width);
+                    }
+                }
+            }
+        };
+
+        var updateElementsSizes = function () {
+            var i;
+            var len = autosizesElems.length;
+            if (len) {
+                i = 0;
+
+                for (; i < len; i++) {
+                    getSizeElement(autosizesElems[i]);
+                }
+            }
+        };
+
+        var debouncedUpdateElementsSizes = debounce(updateElementsSizes);
+
+        return {
+            _: function () {
+                autosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass);
+                addEventListener('resize', debouncedUpdateElementsSizes);
+            },
+            checkElems: debouncedUpdateElementsSizes,
+            updateElem: getSizeElement,
+        };
+    })();
+
+    var init = function () {
+        if (!init.i && document.getElementsByClassName) {
+            init.i = true;
+            autoSizer._();
+            loader._();
+        }
+    };
+
+    setTimeout(function () {
+        if (lazySizesCfg.init) {
+            init();
+        }
+    });
+
+    lazysizes = {
+        cfg: lazySizesCfg,
+        autoSizer: autoSizer,
+        loader: loader,
+        init: init,
+        uP: updatePolyfill,
+        aC: addClass,
+        rC: removeClass,
+        hC: hasClass,
+        fire: triggerEvent,
+        gW: getWidth,
+        rAF: rAF,
+    };
+
+    return lazysizes;
+});
+
+
+/**
+ * AKSRT integration for Zibll's lazySizes runtime.
+ * Normalizes dynamic markup without creating a second media loader.
+ */
+(function (window, document) {
+    'use strict';
+
+    function normalize(root) {
+        var scope = root && root.querySelectorAll ? root : document;
+        scope.querySelectorAll('img,iframe,video,[data-bg],[lazyload-action]').forEach(function (element) {
+            var hasLazySource = element.hasAttribute('data-src') || element.hasAttribute('data-srcset');
+            if (element.tagName === 'VIDEO' && element.querySelector('source[data-src],source[data-srcset]')) {
+                hasLazySource = true;
+            }
+            if ((hasLazySource || element.hasAttribute('data-bg') || element.hasAttribute('lazyload-action')) &&
+                !element.classList.contains('lazyloaded') && !element.classList.contains('lazyloading')) {
+                element.classList.add('lazyload');
+            }
+        });
+    }
+
+    function escapeAttribute(value) {
+        return String(value == null ? '' : value)
+            .replace(/&/g, '&amp;')
+            .replace(/"/g, '&quot;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+    }
+
+    window.aksrtGetLazyImageAttr = function (key, src, className, size) {
+        var config = window.aksrtData || {};
+        var scopes = config.lazyScopes || {};
+        var classes = String(className || '').trim();
+        var realSrc = escapeAttribute(src);
+        if (!src || scopes[key] === false) {
+            return ' class="' + escapeAttribute(classes) + '" src="' + realSrc + '"';
+        }
+        var thumbs = config.lazyThumbs || {};
+        var placeholder = key === 'lazy_avatar'
+            ? (config.lazyAvatar || thumbs.sm || '')
+            : (thumbs[size || 'default'] || thumbs.default || '');
+        return ' class="lazyload ' + escapeAttribute(classes) + '" src="' + escapeAttribute(placeholder) + '" data-src="' + realSrc + '"';
+    };
+
+    document.addEventListener('lazybeforeunveil', function (event) {
+        var element = event.target;
+        var action = element.getAttribute('lazyload-action');
+
+        window.setTimeout(function () {
+            if (action === 'ias') {
+                if (element.hasAttribute('remote-box')) {
+                    element.click();
+                } else {
+                    var trigger = element.matches('.ajax-next,.ias-btn')
+                        ? element
+                        : element.querySelector('.ajax-next,.ias-btn');
+                    if (trigger) {
+                        trigger.setAttribute('no-scroll', 'true');
+                        trigger.dataset.lazyAuto = '1';
+                        trigger.click();
+                    }
+                }
+            } else if (action === 'animated') {
+                var animation = element.getAttribute('data-animated');
+                if (animation) {
+                    element.classList.add('animated', animation);
+                    element.style.visibility = '';
+                }
+            }
+        }, 200);
+
+        var background = element.getAttribute('data-bg');
+        if (background) {
+            element.style.backgroundImage = 'url("' + background.replace(/"/g, '\\"') + '")';
+        }
+
+        if (element.tagName === 'VIDEO') {
+            var changed = false;
+            var poster = element.getAttribute('data-poster');
+            if (poster) {
+                element.setAttribute('poster', poster);
+            }
+            element.querySelectorAll('source[data-src],source[data-srcset]').forEach(function (source) {
+                var src = source.getAttribute('data-src');
+                var srcset = source.getAttribute('data-srcset');
+                if (src) {
+                    source.setAttribute('src', src);
+                    changed = true;
+                }
+                if (srcset) {
+                    source.setAttribute('srcset', srcset);
+                    changed = true;
+                }
+            });
+            if (changed) {
+                event.detail.firesLoad = true;
+                element.load();
+            }
+        }
+    });
+
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', function () { normalize(document); });
+    } else {
+        normalize(document);
+    }
+
+    new MutationObserver(function (records) {
+        records.forEach(function (record) {
+            record.addedNodes.forEach(function (node) {
+                if (node.nodeType !== 1) return;
+                normalize(node);
+            });
+        });
+    }).observe(document.documentElement, { childList: true, subtree: true });
+
+    window.aksrtNormalizeLazyMedia = normalize;
+})(window, document);
@@ -81,7 +81,7 @@
        html += '<strong class="aksrt-order-detail__hero-amount">' + formatMoney(order) + "</strong></div>";
        html += '<div class="aksrt-order-detail__product">';
        html += image
-            ? '<img class="aksrt-order-detail__thumb" src="' + escapeHtml(image) + '" alt="">'
+            ? '<img' + window.aksrtGetLazyImageAttr('lazy_posts_thumb', image, 'aksrt-order-detail__thumb') + ' alt="">'
            : '<span class="aksrt-order-detail__thumb aksrt-order-detail__thumb--empty"><i class="fas fa-book-open"></i></span>';
        html += '<div><strong class="aksrt-order-detail__product-title">' + escapeHtml(title) + "</strong>";
        html += '<span class="aksrt-order-detail__product-meta">' + escapeHtml(order.product_type_label || "") + "</span></div></div>";
@@ -174,7 +174,7 @@

    function cardHtml(order) {
        var image = order.image
-            ? '<img class="aksrt-orders-page__card-img" src="' + escapeHtml(order.image) + '" alt="">'
+            ? '<img' + window.aksrtGetLazyImageAttr('lazy_posts_thumb', order.image, 'aksrt-orders-page__card-img') + ' alt="">'
            : '<div class="aksrt-orders-page__card-art" aria-hidden="true"><i class="fas fa-book-open"></i></div>';
        var countdown = Number(order.time_left || 0) > 0
            ? '<span class="aksrt-orders-page__countdown" data-aksrt-order-countdown="' + Number(order.time_left) + '"></span>'
@@ -288,7 +288,7 @@
      items.forEach(function (item) {
        html += '<a class="aksrt-doc-index-card" href="' + this.escHtml(item.url) + '" data-cat-id="' + (item.cat_id || 0) + '">';
        if (item.thumbnail) {
-          html += '<img class="aksrt-doc-index-card__thumb" src="' + this.escHtml(item.thumbnail) + '" alt="" loading="lazy">';
+          html += '<img' + window.aksrtGetLazyImageAttr('lazy_other', item.thumbnail, 'aksrt-doc-index-card__thumb') + ' alt="">';
        }
        html += '<div class="aksrt-doc-index-card__body">';
        html += '<h3 class="aksrt-doc-index-card__title">' + this.escHtml(item.title) + '</h3>';
@@ -17,6 +17,12 @@
    return el;
  }

+  function lazyImage(key, src, className, size) {
+    var template = document.createElement("template");
+    template.innerHTML = "<img" + window.aksrtGetLazyImageAttr(key, src, className, size) + ' alt="" decoding="async">';
+    return template.content.firstElementChild;
+  }
+
  function append(parent, child) {
    if (child) parent.appendChild(child);
    return child;
@@ -299,11 +305,7 @@
      var levelInfo = levels[String(level)] || {};
      var levelHeader = node("div", "aksrt-vip-level-header");
      if (levelInfo.img_icon) {
-        var levelIcon = node("img", "aksrt-vip-level-icon");
-        levelIcon.src = text(levelInfo.img_icon);
-        levelIcon.alt = "";
-        levelIcon.loading = "lazy";
-        levelIcon.decoding = "async";
+        var levelIcon = lazyImage("lazy_other", text(levelInfo.img_icon), "aksrt-vip-level-icon");
        append(levelHeader, levelIcon);
      }
      append(levelHeader, node("div", "v-name font-bold", group.name || levelInfo.name || "VIP" + level));
@@ -45,7 +45,7 @@
    var icon = item && item.icon_url ? String(item.icon_url) : '';
    var label = item && item.label ? String(item.label) : '';
    if (icon) {
-      return '<img class="medal-icon img-icon' + (className ? ' ' + className : '') + '" src="' + escapeHtml(icon) + '" alt="' + escapeHtml(label) + '" title="' + escapeHtml(label) + '" loading="lazy" decoding="async">';
+      return '<img' + window.aksrtGetLazyImageAttr('lazy_other', icon, 'medal-icon img-icon' + (className ? ' ' + className : '')) + ' alt="' + escapeHtml(label) + '" title="' + escapeHtml(label) + '" decoding="async">';
    }
    return '<span class="medal-icon medal-icon--fa' + (className ? ' ' + className : '') + '"><i class="fas fa-award" aria-hidden="true"></i></span>';
  }
@@ -131,7 +131,7 @@

    return '<div class="medal-modal medal-modal--single">' +
      '<div class="uc-badges-detail__head"><button type="button" class="uc-badges-back" data-aksrt-badges-back><i class="fas fa-angle-left" aria-hidden="true"></i> 返回列表</button></div>' +
-      '<div class="medal-single-card"><div class="medal-single-bg"><img class="fit-cover" src="' + escapeHtml((window.aksrtData && window.aksrtData.themeUri ? window.aksrtData.themeUri : '') + '/assets/img/medal/medal-background.svg') + '" alt=""></div><div class="medal-single-main">' +
+      '<div class="medal-single-card"><div class="medal-single-bg"><img' + window.aksrtGetLazyImageAttr('lazy_other', (window.aksrtData && window.aksrtData.themeUri ? window.aksrtData.themeUri : '') + '/assets/img/medal/medal-background.svg', 'fit-cover') + ' alt=""></div><div class="medal-single-main">' +
      iconHtml(item) + '<div class="medal-single-name">' + escapeHtml(item.label) + '</div>' +
      (item.desc ? '<div class="medal-single-desc muted-2-color">' + escapeHtml(item.desc) + '</div>' : '') + stateLine +
      '</div></div>' + (action ? '<div class="medal-modal__actions">' + action + '</div>' : '') +