点打印后预览里正文图片全是空白框,屏幕上明明显示正常,导出 PDF 也一样,首屏那几张反而有图。日志里能对上时间点,这种反而好排。
打印时浏览器按整页高度布局,视口外的 img 仍带 loading=lazy,不会触发加载。打印样式里也没有解除懒加载的规则。这一点先确认清楚,后面就不用反复试。
window.addEventListener('beforeprint', () => {
document.querySelectorAll('img[data-src]').forEach(i => { i.src = i.dataset.src; });
});
这次卡住的地方就在「打印懒加载空白」这一环,单独把它拎出来验证,别和其他改动混在同一次发布里。能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。
报错里带路径的,先去看那个路径在不在、权限对不对。同一份配置存在多处的,先确认改的是被加载的那一份。
处理上按这个顺序:监听 beforeprint,把 data-src 批量写回 src 并等待解码;打印样式里给图片设 max-width: 100%,避免加载后被裁;确实需要延迟加载的图,打印前单独触发一次加载。
结果对不对很好判断,打印预览里每张正文图片都能看到内容,不再出现空框。
