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

View File

@@ -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();