Question

由于受到限制，我们需要显示来自其他服务的HTML内容，这些图像只是典型的<img src="http://example.com/image.jpg"/>

大多数延迟加载库（例如lozad.js）建议删除src属性并添加data-src，否则浏览器将立即加载每个图像。

我可以解析和转换dom以符合要求，但是我觉得增加额外的开销正在损害性能目的。

有什么技术可以在不触摸HTML的情况下实现延迟加载？

Answer 1

如果要注入image元素的html代码段，则可以将其放在span中，稍后再处理html。

例如：

<div id="topNav">
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
    <div class="heightTest">
    </div>
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
  </div>

然后用javascript观看：

function isElementInViewport (el) {
      var rect = el.getBoundingClientRect();
      return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
  }


  var images = document.getElementsByClassName('unloaded');
  function checkImages() {
    var clean = false;
    for(var i=0; i<images.length;i++){
      var el = images[i];
      if(isElementInViewport(el)){
        //replace the span's innerhtml with the noscript innerhtml.
        el.innerHTML = el.childNodes[1].innerHTML;
        //remove the class, since it's now loaded.
        el.classList.remove("unloaded");
        //we changed at least one element, so we'll want to get a new clean list.
        clean = true;
      }
    }

    if(clean == true){
      images = document.getElementsByClassName('unloaded');
    }
  }
  checkImages();
  window.addEventListener('scroll', checkImages, false);

这样，您就等到事件修改任何HTML为止。这里的一个优点是，如果没有运行javascript，则无论如何都会加载图像。同样，由于它是一个跨度，您可以通过CSS为跨度类“ unloaded”将大小和背景设置为灰色加载图标。

Answer 2

如果您的客户使用supported browsers，则最好在延迟加载中使用HTML内置的新支持

<img src="https://i.picsum.photos/id/238/300/300.jpg" loading="lazy" />

滚动到相关部分时将加载

延迟加载图片而不更改现有的src属性（不更改HTML）？

2 个答案: