懒惰加载图像而不更改现有的`src`属性（不更改HTML）？

Question

由于存在约束，我们需要显示来自不同服务的HTML内容，其中图像只是典型的<img src="http://example.com/image.jpg"/>

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

我可以解析并转换dom以符合要求，但我觉得增加额外的开销会破坏性能目的。

是否有任何技术可以实现延迟加载而不触及HTML？

Answer 1

如果你要注入图像元素的html片段，你可以把它放在一个跨度中，然后再操纵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将大小和背景设置为灰色加载图标，用于跨度类“卸载”。