点打印后预览里正文图片全是空白框,屏幕上明明显示正常,导出 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%,避免加载后被裁;确实需要延迟加载的图,打印前单独触发一次加载。

结果对不对很好判断,打印预览里每张正文图片都能看到内容,不再出现空框。

作者 9823189