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:
@@ -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();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user