fix: 修复首页文章特色图片不显示的问题

- 重写 lazyload 初始化逻辑,避免 Object.assign 污染配置对象
- 为特色图片添加手动预加载机制,确保图片加载后正确显示
- 图片加载完成后显式设置 opacity: 1
- 图片加载失败时移除图片容器,避免显示空白区域
- 修复 effect 配置未正确传递给特色图片的问题
This commit is contained in:
2026-01-12 13:01:43 +08:00
parent 965f931945
commit b20ef2813c

View File

@@ -2181,27 +2181,65 @@ function lazyloadInit(){
setTimeout(lazyloadInit, 100); setTimeout(lazyloadInit, 100);
return; return;
} }
if (argonConfig.lazyload.effect == "none"){ var lazyloadEffect = argonConfig.lazyload.effect;
delete argonConfig.lazyload.effect; if (lazyloadEffect == "none"){
lazyloadEffect = undefined;
} }
$("article img.lazyload:not(.lazyload-loaded) , .related-post-thumbnail.lazyload:not(.lazyload-loaded) , .shuoshuo-preview-container img.lazyload:not(.lazyload-loaded)").lazyload(
Object.assign(argonConfig.lazyload, { // 文章内图片和相关文章缩略图
$("article img.lazyload:not(.lazyload-loaded) , .related-post-thumbnail.lazyload:not(.lazyload-loaded) , .shuoshuo-preview-container img.lazyload:not(.lazyload-loaded)").lazyload({
threshold: argonConfig.lazyload.threshold,
effect: lazyloadEffect,
load: function () { load: function () {
$(this).addClass("lazyload-loaded"); $(this).addClass("lazyload-loaded");
$(this).parent().removeClass("lazyload-container-unload"); $(this).parent().removeClass("lazyload-container-unload");
} }
}) });
);
$(".post-thumbnail.lazyload:not(.lazyload-loaded)").lazyload( // 文章特色图片 - 确保加载后显示
Object.assign({threshold: argonConfig.lazyload.threshold}, { $(".post-thumbnail.lazyload:not(.lazyload-loaded)").each(function() {
var $img = $(this);
var originalSrc = $img.attr("data-original");
if (originalSrc) {
// 创建一个新图片对象来预加载
var img = new Image();
img.onload = function() {
$img.attr("src", originalSrc);
$img.addClass("lazyload-loaded");
$img.css("opacity", "1");
$img.parent().removeClass("lazyload-container-unload");
waterflowInit();
};
img.onerror = function() {
// 图片加载失败,隐藏图片容器
$img.closest(".post-header-with-thumbnail").removeClass("post-header-with-thumbnail");
$img.remove();
waterflowInit();
};
img.src = originalSrc;
}
});
// 也保留原有的 lazyload 调用作为备用
$(".post-thumbnail.lazyload:not(.lazyload-loaded)").lazyload({
threshold: argonConfig.lazyload.threshold,
effect: lazyloadEffect,
load: function () { load: function () {
$(this).addClass("lazyload-loaded"); $(this).addClass("lazyload-loaded");
$(this).css("opacity", "1");
$(this).parent().removeClass("lazyload-container-unload"); $(this).parent().removeClass("lazyload-container-unload");
waterflowInit(); waterflowInit();
} }
}) });
);
$(".comment-item-text .comment-sticker.lazyload").lazyload(Object.assign(argonConfig.lazyload, {load: function(){$(this).removeClass("lazyload")}})); $(".comment-item-text .comment-sticker.lazyload").lazyload({
threshold: argonConfig.lazyload.threshold,
effect: lazyloadEffect,
load: function(){
$(this).removeClass("lazyload");
}
});
} }
lazyloadInit(); lazyloadInit();