如何延迟加载图片并使其可打印。

14 浏览
0 Comments

如何延迟加载图片并使其可打印。

有些网站包含大量的图片，因此使用"懒加载"技术可以减少加载时间和数据消耗。但如果您还需要支持打印功能呢？

我的意思是，您可以尝试检测打印事件，然后加载图片，代码如下：

HTML

注意：这是一个单像素的gif虚拟图片。

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  img = document.querySelector('img');
  var isPrinting = window.matchMedia('print');
  isPrinting.addListener((media) => {
    if (media.matches) {
      img.src = 'http://unsplash.it/500/300/?image=705';
    }
  })
});

注意：如果您在代码播放器中尝试此代码，请删除 DOMContentLoaded 事件（或者直接使用这些链接：JSFiddle | Codepen）。

注意：出于明显的原因，我没有使用 onbeforeprint 和 onafterprint。

如果图片已被缓存，这种方法可以正常工作，但这正是不应该发生的。所有图片应该在打印界面中加载并显示。

您有什么想法吗？是否有人成功实现了一个适用于打印的"懒加载"插件？

更新

我尝试在检测到打印对话框后将用户重定向到标记版本的网站，即 website.com?print=true，在该版本中禁用懒加载并正常加载所有图片。

通过在此标记的打印就绪页面中应用 window.print() 方法，当所有图片加载完成时打开新的打印对话框，并在页面顶部同时显示一个"请稍等"的消息。

重要提示：此方法在Chrome中经过测试，但在Firefox和Edge中无效（这也是为什么这不是一个答案，而是一个证明）。

在Chrome中，当您重定向到另一个网站时（在这种情况下是相同的URL但带有标记），打印对话框会关闭。而在Edge和Firefox中，打印对话框是一个实际的窗口，它不会关闭，使其几乎无法使用。

0