From f25eb17d3e4dd6df2d554b36dcde5eb8f3081933 Mon Sep 17 00:00:00 2001 From: nanhaoluo <3075912108@qq.com> Date: Fri, 16 Jan 2026 19:50:14 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20lazyload=20?= =?UTF-8?q?=E6=87=92=E5=8A=A0=E8=BD=BD=E5=8A=9F=E8=83=BD=E6=97=A0=E6=B3=95?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - functions.php: 重写 argon_lazyload 函数，使用 data-src 存储原始图片地址 - functions.php: 添加占位图和 lazyload 类，恢复加载动画样式支持 - functions.php: 恢复 argon_enable_lazyload 设置项检查 - argontheme.js: 使用 IntersectionObserver 实现真正的懒加载 - argontheme.js: 支持 fadeIn/slideDown 加载效果和自定义阈值 - header.php: 恢复 lazyload 相关配置项传递给 argonConfig --- argontheme.js | 87 ++++++++++++++++++++++++++++++++++++++++++++++++--- functions.php | 67 +++++++++++++++++++++++++++++++++++---- header.php | 6 ++-- 3 files changed, 148 insertions(+), 12 deletions(-) diff --git a/argontheme.js b/argontheme.js index 0c2b66b..a741218 100644 --- a/argontheme.js +++ b/argontheme.js @@ -2235,10 +2235,89 @@ $.fancybox.defaults.i18n = { } }; -/*Lazyload - 已改用浏览器原生 loading="lazy"*/ -function lazyloadInit(){ - // 原生懒加载无需 JS 初始化 - // 保留此函数以兼容可能的外部调用 +/*Lazyload - 使用 IntersectionObserver 实现懒加载*/ +function lazyloadInit() { + let images = document.querySelectorAll('img.lazyload[data-src]'); + if (images.length === 0) return; + + let effect = argonConfig.lazyload_effect || 'fadeIn'; + let threshold = parseInt(argonConfig.lazyload_threshold) || 800; + + // 使用 IntersectionObserver 实现懒加载 + if ('IntersectionObserver' in window) { + let observer = new IntersectionObserver(function(entries) { + entries.forEach(function(entry) { + if (entry.isIntersecting) { + let img = entry.target; + loadImage(img, effect); + observer.unobserve(img); + } + }); + }, { + rootMargin: threshold + 'px 0px' + }); + + images.forEach(function(img) { + observer.observe(img); + }); + } else { + // 降级方案：直接加载所有图片 + images.forEach(function(img) { + loadImage(img, effect); + }); + } +} + +/** + * 加载单张图片 + * @param {HTMLImageElement} img - 图片元素 + * @param {string} effect - 加载效果 + */ +function loadImage(img, effect) { + let src = img.getAttribute('data-src'); + if (!src) return; + + // 预加载图片 + let tempImg = new Image(); + tempImg.onload = function() { + img.src = src; + img.removeAttribute('data-src'); + img.classList.remove('lazyload'); + + // 移除所有 lazyload-style-* 类 + img.className = img.className.replace(/\blazyload-style-\d+\b/g, '').trim(); + + // 应用加载效果 + if (effect === 'fadeIn') { + img.style.opacity = '0'; + img.style.transition = 'opacity 0.3s ease'; + setTimeout(function() { + img.style.opacity = '1'; + }, 10); + setTimeout(function() { + img.style.transition = ''; + }, 310); + } else if (effect === 'slideDown') { + img.style.opacity = '0'; + img.style.transform = 'translateY(-20px)'; + img.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; + setTimeout(function() { + img.style.opacity = '1'; + img.style.transform = 'translateY(0)'; + }, 10); + setTimeout(function() { + img.style.transition = ''; + img.style.transform = ''; + }, 310); + } + }; + tempImg.onerror = function() { + // 加载失败时使用原始 src + img.src = src; + img.removeAttribute('data-src'); + img.classList.remove('lazyload'); + }; + tempImg.src = src; } lazyloadInit(); diff --git a/functions.php b/functions.php index 04af982..8592162 100644 --- a/functions.php +++ b/functions.php @@ -2989,11 +2989,64 @@ function get_banner_background_url(){ return $url; } } -//原生懒加载：对 标签添加 loading="lazy" 属性 +//懒加载：对 标签添加懒加载支持 function argon_lazyload($content){ - if(!is_feed() && !is_robots() && !is_home()){ - // 为没有 loading 属性的图片添加 loading="lazy" - $content = preg_replace('/]*)>/i', '', $content); + if (!is_feed() && !is_robots() && !is_home()) { + $loading_style = get_option('argon_lazyload_loading_style', '1'); + // 占位图 base64（用于触发 CSS 加载动画） + $placeholder = 'data:image/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPg=='; + $style_class = ($loading_style !== 'none') ? ' lazyload-style-' . $loading_style : ''; + + $content = preg_replace_callback( + '/]*)>/i', + function($matches) use ($placeholder, $style_class) { + $attrs = $matches[1]; + + // 如果已有 lazyload 类或 data-src 属性则不处理 + if (preg_match('/\bclass\s*=\s*["\'][^"\']*\blazyload\b/i', $attrs) || + preg_match('/\bdata-src\s*=/i', $attrs)) { + return $matches[0]; + } + + // 提取 src 属性 + if (!preg_match('/\bsrc\s*=\s*["\']([^"\']*)["\']/', $attrs, $src_match)) { + return $matches[0]; + } + $original_src = $src_match[1]; + + // 跳过已经是 base64 的图片 + if (strpos($original_src, 'data:image') === 0) { + return $matches[0]; + } + + // 替换 src 为占位图，添加 data-src 存储原始地址 + $new_attrs = preg_replace( + '/\bsrc\s*=\s*["\'][^"\']*["\']/', + 'src="' . $placeholder . '" data-src="' . esc_attr($original_src) . '"', + $attrs + ); + + // 添加 lazyload 类 + if (preg_match('/\bclass\s*=\s*["\']([^"\']*)["\']/', $new_attrs, $class_match)) { + $new_class = $class_match[1] . ' lazyload' . $style_class; + $new_attrs = preg_replace( + '/\bclass\s*=\s*["\'][^"\']*["\']/', + 'class="' . esc_attr($new_class) . '"', + $new_attrs + ); + } else { + $new_attrs .= ' class="lazyload' . $style_class . '"'; + } + + // 添加 loading="lazy" 作为后备 + if (!preg_match('/\bloading\s*=/i', $new_attrs)) { + $new_attrs .= ' loading="lazy"'; + } + + return ''; + }, + $content + ); } return $content; } @@ -3004,8 +3057,10 @@ function argon_fancybox($content){ return $content; } function the_content_filter($content){ - // 始终使用原生懒加载 - $content = argon_lazyload($content); + // 根据设置决定是否启用懒加载 + if (get_option('argon_enable_lazyload') !== 'false') { + $content = argon_lazyload($content); + } if (get_option('argon_enable_fancybox') != 'false' && get_option('argon_enable_zoomify') == 'false'){ $content = argon_fancybox($content); } diff --git a/header.php b/header.php index f1355b2..26939dc 100644 --- a/header.php +++ b/header.php @@ -407,8 +407,10 @@ pangu: "", - // 原生懒加载已启用，无需 JS lazyload 配置 - lazyload: false, + // 懒加载配置 + lazyload: , + lazyload_effect: "", + lazyload_threshold: , fold_long_comments: ,