javascript - 这个支持打印媒体的 lazyload 函数逻辑有什么问题？

Question

我在网页的某个部分对图像使用延迟加载 功能。 (基本上，当前显示在 viewport 中的图像是获取的。其余的不是从服务器获取的。)以下 JavaScript 有效。

用法示例:img class="lazy"src="/images/pixel.gif"data-src="/images/actual-image.jpg"alt="alt text"

辅助信息:在图像标签上方我还有无脚本标签和图像标签下方以支持非 JavaScript 情况。

img src="/images/actual-image.jpg"alt="alt text"

为了简洁起见，我没有在代码片段中添加任何 css 或 html。对不起。

工作 JavaScript:

  var lazy = [];
  registerListener('load', setLazy);
  registerListener('load', lazyLoad);
  registerListener('scroll', lazyLoad);
  registerListener('resize', lazyLoad);
  function setLazy(){
    lazy = document.getElementsByClassName('lazy');
  }
  function lazyLoad(){
    for(var i=0; i<lazy.length; i++){
      if(isInViewport(lazy[i])){
        if (lazy[i].getAttribute('data-src')){
          lazy[i].src = lazy[i].getAttribute('data-src');
          lazy[i].removeAttribute('data-src');
        }
      }
    }
    cleanLazy();
  }
  function cleanLazy(){
    lazy = Array.prototype.filter.call(lazy, function(l){ return l.getAttribute('data-src');});
  }
  function isInViewport(el){
    var rect = el.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  function registerListener(event, func) {
    if (window.addEventListener) {
      window.addEventListener(event, func);
    } else {
      window.attachEvent('on' + event, func);
    }
  }

从技术上讲，延迟加载脚本在 data-src 属性中获取图像 url，并在 视口(viewport)窗口 中显示的图像的 src 属性中替换它。

需要/要求:

当我打印网页时，我希望看到打印中的所有图像(pdf/物理打印纸)。

问题:

除非用户滚动浏览整组图像，否则会有空白或黑色占位符(基于不同的浏览器)。

我想避免上述情况。我无法禁用脚本。因此，我对其进行了修改，以支持打印媒体检测并加载所有图像，即使用户不需要滚动浏览整个延迟加载图像也是如此。

这是我的不工作脚本。该脚本需要修复。

  var lazy = [];
  registerListener('load', setLazy);
  registerListener('load', checkPrintMedia);
  registerListener('scroll', lazyLoad);
  registerListener('resize', lazyLoad);
  function setLazy(){
    lazy = document.getElementsByClassName('lazy');
  }
  function checkPrintMedia(){
    if (window.matchMedia) {
      var mediaQueryList1 = window.matchMedia('print');
      mediaQueryList1.addListener(function(mql) {
        if (mql.matches) {
          for(var i=0; i<lazy.length; i++){
            if (lazy[i].getAttribute('data-src')){
              lazy[i].src = lazy[i].getAttribute('data-src');
              lazy[i].removeAttribute('data-src');
            }
          }
          cleanLazy();
        }
        else{
          lazyLoad();
        }
      });
    }
  }
  function lazyLoad(){
    for(var i=0; i<lazy.length; i++){
      if(isInViewport(lazy[i])){
        if (lazy[i].getAttribute('data-src')){
          lazy[i].src = lazy[i].getAttribute('data-src');
          lazy[i].removeAttribute('data-src');
        }
      }
    }
    cleanLazy();
  }
  function cleanLazy(){
    lazy = Array.prototype.filter.call(lazy, function(l){ return l.getAttribute('data-src');});
  }
  function isInViewport(el){
    var rect = el.getBoundingClientRect();
    return (
      rect.bottom >= 0 &&
      rect.right >= 0 &&
      rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.left <= (window.innerWidth || document.documentElement.clientWidth)
    );
  }
  function registerListener(event, func) {
    if (window.addEventListener) {
      window.addEventListener(event, func);
    } else {
      window.attachEvent('on' + event, func);
    }
  }

我需要帮助。请。

Answer 1

在 IE 5+、Firefox 6+、Chrome 9+ 和 Safari 5.1+ 中可以使用 JS 进行打印检测。我猜你失败的尝试来自 Detecting Print Requests with JavaScript

您应该实现组合方法。通过查看您的代码:您在 window.matchMedia 上收听仅适用于 Chrome 和 Safari。

你必须收听 window.onbeforeprint以及。像这样。

var beforePrint = function() {
    for(var i=0; i<lazy.length; i++){
        if (lazy[i].getAttribute('data-src')){
          lazy[i].src = lazy[i].getAttribute('data-src');
          lazy[i].removeAttribute('data-src');
        }
     }
     cleanLazy();
}

if (window.matchMedia) {
    var mediaQueryList = window.matchMedia('print');
    mediaQueryList.addListener(function(mql) {
        if (mql.matches) beforePrint();
    })
}

window.onbeforeprint = beforePrint;

更新2

事实证明，问题在于打印不会等待图像加载，即使在 beforePrint 中等待也是如此。 .

我认为解决这个问题的方法是在 beforePrint 中重新加载页面并添加一个参数。这将位于页面的头部。

var reloadForPrint = function() {
    if(location.search.indexOf('print') === -1) {
      var url = window.location.href;
      if (url.indexOf('?') > -1) window.location.href = url += '&print'
      else window.location.href = url += '?print'
    }
}
window.matchMedia && window.matchMedia('print').addListener(function(mql) {if (mql.matches) reloadForPrint()})
window.onbeforeprint = reloadForPrint

现在，当页面再次加载时检查该参数，禁用延迟加载并执行 window.print()方法。这将在脚本标记之后 </body> . (确保脚本的其余部分在此之前加载，这应该是最后一个 block )

if(location.search.indexOf('print') > -1) {
    for(var i=0; i<lazy.length; i++){
        if (lazy[i].getAttribute('data-src')){
          lazy[i].src = lazy[i].getAttribute('data-src');
          lazy[i].removeAttribute('data-src');
        }
     }
     cleanLazy();
     window.print()
}

这会做什么？

基本上，当有人想要打印时，它会重新加载页面并添加 ?print URL 的参数。当此参数存在时，将加载所有图像并以编程方式执行打印命令。但是，这次它将等待所有图像加载完毕。