文章封面随机图重复刷新

[Yish1]

问题出处：

当点击“更早的文章”按钮后，之前已加载的文章封面随机图会重复刷新

配置与环境：

• 问题页面：https://cmxz.top
• PHP top：8.2
• WordPress 版本：6.5.4
• 主题版本：当前最新preview分支
• 浏览器：Edge Beta 127.0.2651.5

截图（若有） 群里发了视频，或者cmxz.top首页能复现

补充信息：

提供尽可能多的相关信息。

[github-actions[bot]]

@Yish1，感谢你给 sakurairo 提出了 issue。ヾ(≧▽≦*)o 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[kanodaisuki]

在主题的图片懒加载实现中，当图片从可视窗口外重新回到可视窗口内时，都会触发一次doLoad 方法，重新设置图片的src属性，详见： https://github.com/KotoriK/lazyload/blob/efc7a1b081d4b865788600a7403126564247dfbd/src/lazyload.ts#L89-L92

重新设置src属性，意味着浏览器会再次请求图片资源，从你的API响应头上看，你没有给图片资源设置缓存，缓存头被设置成了Cache-Control: no-cache, no-store, must-revalidate，这会导致浏览器忽略缓存，重新请求图片资源。

对于同一个URL，你的图片API会返回不同的图片，所以从视觉上看，已经加载的文章封面随机图会重新加载，即封面图片发生了改变。

总的来说，出现这个问题的主要原因可能是doLoad 方法不够完善，在设置src之前，或许应检查图片是否已经完成了lazyload：

if (tagName === 'video') {
    if (src && element.src !== src) {
        element.src = src;
    }
} else if (tagName === 'img') {
    if (src && element.src !== src) {
        element.src = src;
    }
    if (srcset && element.srcset !== srcset) {
        element.srcset = srcset;
    }
}

@KotoriK

[Yish1]

感谢！在启用api缓存后，确实不会重复加载了

[KotoriK]

在主题的图片懒加载实现中，当图片从可视窗口外重新回到可视窗口内时，都会触发一次doLoad 方法，重新设置图片的src属性，详见： https://github.com/KotoriK/lazyload/blob/efc7a1b081d4b865788600a7403126564247dfbd/src/lazyload.ts#L89-L92

重新设置src属性，意味着浏览器会再次请求图片资源，从你的API响应头上看，你没有给图片资源设置缓存，缓存头被设置成了Cache-Control: no-cache, no-store, must-revalidate，这会导致浏览器忽略缓存，重新请求图片资源。

对于同一个URL，你的图片API会返回不同的图片，所以从视觉上看，已经加载的文章封面随机图会重新加载，即封面图片发生了改变。

总的来说，出现这个问题的主要原因可能是doLoad 方法不够完善，在设置src之前，或许应检查图片是否已经完成了lazyload：

if (tagName === 'video') {
    if (src && element.src !== src) {
        element.src = src;
    }
} else if (tagName === 'img') {
    if (src && element.src !== src) {
        element.src = src;
    }
    if (srcset && element.srcset !== srcset) {
        element.srcset = srcset;
    }
}

@KotoriK

确实 这段代码是直接抄upstream的没看，现在才发现他这个删除根本没删

[Yish1]

请问在Sakurairo_Scripts中的修改是需要webpack打包之后再替换Sakurairo里面的js文件吗？

[kanodaisuki]

请问在Sakurairo_Scripts中的修改是需要webpack打包之后再替换Sakurairo里面的js文件吗？

是的