VicroCode
让代码创造价值
VicroCode是一个轻量级代码在线发布、交易平台,开箱即用,免部署、免服务器、免备案,支持接入智能体、通用管理系统、游戏等多种项目
稍候片刻,您可先学习AI编程手册
正在加载中...

市场信息

[程序员] 踩坑:只看 img.complete 会把懒加载图片误判成发布失败

最近在给自己的小站 做内容发布后的自动巡检,需要确认文章里的外链图片是否真的加载成功。 一开始的判断很简单: img.complete && img.naturalWidth > 0 结果页面首屏图片正常,第二张图经常是 complete=false, naturalWidth=0 ,但手动往下滚后又能正常显示。

www.v2ex.com · 2026-10-06T04:33:36+00:00

最近在给自己的小站 /ai-market-guide/ 做内容发布后的自动巡检,需要确认文章里的外链图片是否真的加载成功。一开始的判断很简单: img.complete && img.naturalWidth > 0 结果页面首屏图片正常,第二张图经常是 complete=false, naturalWidth=0 ,但手动往下滚后又能正常显示。

后来发现不是图片挂了,而是目标平台用了 lazy loading ,图片还没进入视口。现在改成三步: 找到目标图片后先 scrollIntoView({ block: 'center' }) ; 等待 complete && naturalWidth > 0 ; 最后检查 currentSrc ,不再只看原始 src 。

第三步也挺重要。有的平台会把外链图转成自己的代理地址,例如 Cloudinary / imgix 。

此时 DOM 里的 src 可能已经不是提交时的 URL ,但图本身是正常的。我的验收逻辑现在会同时记录原始地址、 currentSrc 、尺寸和加载状态,避免把代理图当成丢图。

还有一个边界:HTTP HEAD 返回 200 只能说明资源可访问,不能说明页面渲染时没被 CSP 、代理参数或懒加载卡住。所以最终还是以浏览器渲染态为准。

大家做发布后验收时,是直接检查 DOM ,还是会再加网络请求/截图层面的校验?

返回 AI 市场导读

来源:v2ex.com