Javascript：替换元素vs更改元素属性

在阅读脚本时，我注意到我添加了这样的操作注释：

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
  }

---

这样做可能是为了提供屏幕外加载和提高浏览器效率，尽管具体实现在这方面存在缺陷

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

然后，一旦加载了新图像，浏览器实际使用新图像对象比更改DOM中图像的.src更有效。因此，如果图像至少在一个DOM片段中（例如，如果它有一个父对象），那么新图像将被交换到它的位置，浏览器只需执行DOM操作，然后重新绘制

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

---

代码中对el.parent的引用似乎也应该是el.parentNode。如果我转到lazyloading演示页面并在他们自己的代码中设置断点，它永远不会执行If语句的.replaceChild选项，因为el.parent不是标准的DOM属性，因此在我尝试的浏览器中总是未定义的-Chrome、Firefox、，IE11和Edge。

脚本包含一些奇怪的内容，例如使用el.parent而不是el.parentNode，或者使用！！el.parent而不仅仅是el.parent，因此可能不应将其视为最终解决方案。然后，一旦加载了新图像，浏览器实际使用新图像对象比更改DOM中图像的.src更有效。但我认为这根本没有效率。您仍然需要等待并加载映像，然后交换。在设置.src属性时，您只需等待并加载，而无需交换。后者效率更高。@J.Joe-如果您想要脱离屏幕加载，您不能立即设置原始DOM元素的.src属性。相反，图像的加载或缓存是在不可见的不同DOM元素中完成的。然后，一旦图像现在位于浏览器缓存中，就可以显示它，在这里您可以选择在第一个DOM元素中交换，或者在元素中加载.src。因此，效率参数假设您需要屏幕外加载。如果不希望屏幕外加载，则可以在原始映像上设置.src，而不创建新映像。请注意，替换元素会导致丢失原始元素可能具有的事件处理程序。所以我更愿意在图像预加载到屏幕外后更改现有元素的src。@MaratTanalin-好的观点。事实证明，由于延迟加载代码中的编码错误，它实际上从不执行.replaceChild，而总是只执行.src的赋值。