Tech
[程序员] 踩坑:只看 img.complete 会把懒加载图片误判成发布失败
最近在给自己的小站 https://nanobanana21.net/ 做内容发布后的自动巡检,需要确认文章里的外链图片是否真的加载成功。
一开始的判断很简单:
img.complete && img.naturalWidth > 0
结果页面首屏图片正常,第二张图经常是 complete=false, naturalWidth=0 ,但手动往下滚后又能正常显示。后来发现不是图片挂了,而是目标平台用了 lazy loading ,图片还没进入视口。
现在改成三步:
找到目标图片后先 scrollIntoView({ block: 'center' }) ;
等待 complete && naturalWidth > 0 ;
最后检查 currentSrc ,不再只看原始 src 。
第三步也挺重要。有的平台会把外链图转成自己的代理地址,例如 Cloudinary / imgix 。此时 DOM 里的 src 可能已经不是提交时的 URL ,但图本身是正常的。我的验收逻辑现在会同时...
Read the full discussion on V2EX
This article was aggregated from V2EX. Click to join the conversation.
View on V2EX