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

这可能是通过这种方式提供屏幕外加载和浏览器效率目的（尽管具体实现在这方面存在缺陷）。

似乎延迟加载需要图像的实际加载发生＆＃34;不在视图中＃34;。因此，出于这个原因，创建了一个新的Image对象，并在其上设置了.src。

然后，一旦加载了新图像，浏览器实际使用该新图像对象就更有效，而不是更改DOM中图像上的.src。因此，如果图像看起来至少是一个DOM片段（例如，如果它有一个父片段），那么新图像就会交换到它的位置，浏览器必须做的唯一事情是DOM操作然后重新绘制。

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

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

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

1 个答案: