fix: 修复 lazyload 懒加载功能无法使用的问题

- 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
2026-01-16 19:50:14 +08:00
parent 938a33d1e0
commit f25eb17d3e
3 changed files with 148 additions and 12 deletions
--- 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();

--- a/functions.php
+++ b/functions.php
@@ -2989,11 +2989,64 @@ function get_banner_background_url(){
 		return $url;
 	}
 }
-//原生懒加载：对 <img> 标签添加 loading="lazy" 属性
+//懒加载：对 <img> 标签添加懒加载支持
 function argon_lazyload($content){
-	if(!is_feed() && !is_robots() && !is_home()){
-		// 为没有 loading 属性的图片添加 loading="lazy"
-		$content = preg_replace('/<img((?!loading=)[^>]*)>/i', '<img$1 loading="lazy">', $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(
+			'/<img\s+([^>]*)>/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 '<img ' . $new_attrs . '>';
+			},
+			$content
+		);
 	}
 	return $content;
 }
@@ -3004,8 +3057,10 @@ function argon_fancybox($content){
 	return $content;
 }
 function the_content_filter($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);
 	}
--- a/header.php
+++ b/header.php
@@ -407,8 +407,10 @@

 			pangu: "<?php echo get_option('argon_enable_pangu', 'false'); ?>",

-			// 原生懒加载已启用，无需 JS lazyload 配置
-			lazyload: false,
+			// 懒加载配置
+			lazyload: <?php echo (get_option('argon_enable_lazyload') !== 'false' ? 'true' : 'false'); ?>,
+			lazyload_effect: "<?php echo get_option('argon_lazyload_effect', 'fadeIn'); ?>",
+			lazyload_threshold: <?php echo (get_option('argon_lazyload_threshold') == '' ? '800' : get_option('argon_lazyload_threshold')); ?>,

 			fold_long_comments: <?php echo get_option('argon_fold_long_comments', 'false'); ?>,