feat(frontend): replace lazy loading with zibll lazysizes

assets/css/frontend/enhancements/modal-motion/dark-mode-2.css

@@ -69,53 +69,34 @@
     }
 }
 
-/* ============================================================
- * 14. 图片懒加载 blur-to-sharp 过渡
- * 模仿 zibll 的 lazy_blur 效果
- * ============================================================ */
-img.lazyload,
-img.lazyloaded,
-img[data-src] {
-    transition: filter 0.6s var(--ease), opacity 0.4s var(--ease);
+/* Zibll lazySizes state and animation contract. */
+.lazyloaded {
+    transition: 0.3s;
+    --lazy-animation: lazy_blur;
 }
 
-img.lazyload,
-img[data-src] {
-    filter: blur(5px);
-    opacity: 0.7;
+.lazyloaded.img-icon {
+    --lazy-animation: lazy_fade;
 }
 
-img.lazyloaded {
-    filter: blur(0);
-    opacity: 1;
+img.lazyloaded:not(.lazyloadafter) {
+    -webkit-animation: var(--lazy-animation) 0.6s;
+    animation: var(--lazy-animation) 0.6s;
 }
 
-/* 14b. aksrt-lazy 动画变体（按 lazyload_animation 配置切换） */
-@keyframes aksrt-lazy-blur {
-    from { filter: blur(8px); opacity: 0.6; }
-    to   { filter: blur(0); opacity: 1; }
-}
-@keyframes aksrt-lazy-fade {
-    from { opacity: 0; }
-    to   { opacity: 1; }
-}
-@keyframes aksrt-lazy-scale {
-    from { transform: scale(1.08); opacity: 0.8; }
-    to   { transform: scale(1); opacity: 1; }
+@keyframes lazy_blur {
+    0% { filter: blur(5px); }
+    100% { filter: blur(0); }
 }
 
-img.aksrt-lazy {
-    transition: filter 0.5s var(--ease), opacity 0.5s var(--ease), transform 0.5s var(--ease);
+@keyframes lazy_fade {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
 }
 
-img.aksrt-loaded[data-lazy-animation="blur"] {
-    animation: aksrt-lazy-blur 0.6s ease both;
-}
-img.aksrt-loaded[data-lazy-animation="fade"] {
-    animation: aksrt-lazy-fade 0.6s ease both;
-}
-img.aksrt-loaded[data-lazy-animation="scale"] {
-    animation: aksrt-lazy-scale 0.5s ease both;
+@keyframes lazy_scale {
+    0% { transform: scale(1.1); }
+    80% { transform: unset; }
 }
 
 /* ============================================================
@@ -308,21 +289,6 @@ input:focus, textarea:focus, select:focus,
     animation: aksrtPopIn var(--dur-fast) var(--ease-out) forwards;
 }
 
-/* --- 图片懒加载过渡 --- */
-img.lazyload, img.lazyloaded, img[data-src] {
-    transition: filter 0.6s var(--ease), opacity 0.4s var(--ease);
-}
-
-img.lazyload, img[data-src] {
-    filter: blur(5px);
-    opacity: 0.7;
-}
-
-img.lazyloaded {
-    filter: blur(0);
-    opacity: 1;
-}
-
 /* --- 滚动进度条动效 --- */
 .reading-progress-bar {
     transition: width 0.1s linear;

assets/css/frontend/header-components/base.css

@@ -43,35 +43,6 @@
     object-fit: cover;
 }
 
-/* Lazy preloader */
-.new-swiper .swiper-lazy-preloader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 42px;
-    height: 42px;
-    margin: -21px 0 0 -21px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: aksrt-swiper-spin 0.8s linear infinite;
-}
-
-@keyframes aksrt-swiper-spin {
-    from { transform: rotate(0deg); }
-    to { transform: rotate(360deg); }
-}
-
-.new-swiper .swiper-lazy {
-    opacity: 0;
-    transition: opacity 0.3s;
-}
-
-.new-swiper .swiper-lazy.lazyloaded,
-.new-swiper .swiper-slide-visible .swiper-lazy {
-    opacity: 1;
-}
-
 .new-swiper .pagination-thumbnail-item {
     width: 60px;
     height: 40px;

assets/css/frontend/home-modules/responsive.css

@@ -256,21 +256,6 @@
 	flex-shrink: 0;
 }
 
-/* 懒加载骨架 */
-.cat-card__banner .aksrt-skeleton {
-	position: absolute;
-	inset: 0;
-}
-
-.cat-card__banner img.aksrt-lazy {
-	opacity: 0;
-	transition: opacity 0.3s ease;
-}
-
-.cat-card__banner img.aksrt-loaded {
-	opacity: 1;
-}
-
 /* 响应式 */
 @media (max-width: 767px) {
 	.cat-cards-grid {
@@ -291,4 +276,3 @@
 /* ============================================================
  * Phase 5: 运营型模块样式
  * ============================================================ */
-

assets/css/frontend/homepage-fixed/base-1.css

@@ -15,21 +15,6 @@
    0. ANIMATIONS
    ================================================================ */
 
-@keyframes aksrt-lazy-blur {
-  from { filter: blur(5px); opacity: 0.6; }
-  to   { filter: blur(0);   opacity: 1; }
-}
-
-@keyframes aksrt-lazy-fade {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
-@keyframes aksrt-lazy-scale {
-  from { transform: scale(1.1); opacity: 0.8; }
-  to   { transform: scale(1);   opacity: 1; }
-}
-
 @keyframes aksrt-skeleton-pulse {
   0%, 100% { opacity: 1; }
   50%      { opacity: 0.4; }
@@ -55,14 +40,6 @@
   transition: color 0.2s, background 0.3s, opacity 0.3s, box-shadow 0.3s, transform 0.3s;
 }
 
-.aksrt-homepage img.aksrt-loaded {
-  animation: aksrt-lazy-blur 0.6s ease;
-}
-
-.aksrt-homepage img.aksrt-loaded.img-icon {
-  animation: aksrt-lazy-fade 0.6s ease;
-}
-
 .aksrt-homepage .aksrt-skeleton {
   animation: aksrt-skeleton-pulse 1.5s ease-in-out infinite;
 }

assets/css/frontend/homepage-fixed/base-2.css

@@ -177,13 +177,6 @@ html.dark #index-tab-main > .posts-item.list:hover {
   transform: scale(1.02);
 }
 
-.aksrt-homepage__posts > .posts-item.list .item-thumbnail .aksrt-skeleton {
-  position: absolute;
-  inset: 0;
-  background: var(--surface-2, #eee);
-  border-radius: inherit;
-}
-
 .aksrt-homepage__posts > .posts-item.list .item-thumbnail .img-badge {
   position: absolute;
   top: 8px;
@@ -230,7 +223,6 @@ html.dark #index-tab-main > .posts-item.list:hover {
   border-radius: var(--radius, 8px);
 }
 
-.aksrt-homepage__posts > .posts-item.list.mult-thumb .thumb-items > span .aksrt-skeleton,
 .aksrt-homepage__posts > .posts-item.list.mult-thumb .thumb-items > span > img {
   position: absolute;
   inset: 0;

assets/css/frontend/pages/base-3.css

@@ -26,21 +26,6 @@
   text-decoration: underline;
 }
 
-/* 分类推荐懒加载骨架 */
-.category-recommend-card__hero .aksrt-skeleton {
-  position: absolute;
-  inset: 0;
-}
-
-.category-recommend-card__hero img.aksrt-lazy {
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-.category-recommend-card__hero img.aksrt-loaded {
-  opacity: 1;
-}
-
 /* 分类推荐响应式 */
 @media (max-width: 767px) {
   .category-recommend {
@@ -121,4 +106,3 @@
   line-height: var(--leading-relaxed, 1.7);
   color: var(--color-ink-3);
 }
-