Javascript:替换元素与更改元素属性

Question

在阅读Image Lazy Loading时脚本中，我注意到有这样的操作(评论是我添加的):

function loadImage (el) {
    var img = new Image()
      , src = el.getAttribute('data-src');
    img.onload = function() {
      if (!! el.parent)
        el.parent.replaceChild(img, el) // Replace Element
      else
        el.src = src; // Change Element Property
    }
    img.src = src;
  }

为什么它不简单地更改元素属性？这要简单得多。为什么要创建一个新元素并替换旧元素(无论如何，这两个元素都是图像)？有什么优点？

function loadImage (el) {
    src = el.getAttribute('data-src');
    el.src = src; // Change Element Property
  }

Answer 1

这样做可能是为了提供离屏加载并提高浏览器效率(尽管具体实现在这方面存在缺陷)。

延迟加载似乎希望图像的实际加载发生在“ View 之外”。因此，出于这个原因，创建了一个新的 Image 对象，并在其上设置了 .src。

然后，一旦加载了新图像，浏览器实际使用该新图像对象会比更改 DOM 中图像上的 .src 更有效。因此，如果图像至少出现在 DOM 片段中(例如，如果它有父级)，则新图像将被交换到其位置，浏览器唯一要做的就是 DOM 操作，然后重新绘制。

如果图像没有父图像，则无法交换原始图像，因此它只是在其上设置 .src 。设置 .src 属性将导致浏览器再次请求图像 URL。它会在本地缓存中找到该 URL，但仍然需要从缓存中获取图像并解析图像格式(这比仅仅交换 DOM 元素需要更多工作)。

---

代码中对 el.parent 的引用似乎应该是 el.parentNode。如果我进入延迟加载演示页面并在他们自己的代码中设置断点，它永远不会执行 if 语句的 .replaceChild() 选项，因为 el. parent 不是标准 DOM 属性，因此在我尝试过的浏览器(Chrome、Firefox、IE11 和 Edge)中始终是未定义。