将 src 修改为 data-src JavaScript [重复]答案

【问题标题】：Modify the src to data-src JavaScript [duplicate]将 src 修改为 data-src JavaScript [重复]
【发布时间】：2021-06-15 14:56:32
【问题描述】：

我想用data-src 替换src，我有脚本，但它不能正常工作。请修改这个给定的脚本。

这是我想在加载图像之前加载的脚本，但它不能正常工作，所以请修复它。

var region = document.getElementsByClassName("content");

if (region) {
  var img = region.getElementsByTagName("img");

  for (var i = 0; i < imgEl.length; i++) {
    if (imgEl[i].getAttribute('src')) {
      imgEl[i].setAttribute('data-src', imgEl[i].getAttribute('src'));
      imgEl[i].removeAttribute('src');
    }
  }
}

&lt;div class='content'&gt; &lt;img src="img.jpg" alt="img"&gt; &lt;/div&gt;

【问题讨论】：

请html。！！
错字？ var imgEl = region.getElementsByTagName("img");
托尼，所有信息都属于你的问题，而不是在这里。
getElementsByClassName 返回元素的集合。集合没有名为getElementsByTagName 的方法； img !== imgEl;代码获取src 属性，将data-src 属性设置为其值，然后将其删除。这会导致所有图像都损坏。

标签： javascript html image dom

【解决方案1】：

一个很好的方法是使用 querySelectorAll 来获取 NodeList 的返回，并且可以使用 forEach 回调进行迭代，这里是一个示例：

var region = document.querySelectorAll(".content");

//console.log(region);

if (region) {

  region.forEach(function(element) {

    let img = element.querySelectorAll("img");

    img.forEach(function(elementx, index) {

      let x = elementx.getAttribute('src');

      if (x) {
        elementx.dataset.src = x;
        elementx.removeAttribute('src');
      }

    });

  });


}

<div class="content">

  <p>Abcd</p>
  <img src="something.jpg" />

  <p>Efgh</p>
  <img src="something2.jpg" />

  <p>Ijkl</p>
  <img src="something3.jpg" />

</div>

<div class="content">

  <p>Abcd</p>
  <img src="something4.jpg" />

  <p>Efgh</p>
  <img src="something5.jpg" />

  <p>Ijkl</p>
  <img src="something6.jpg" />

</div>

【讨论】：

请注意，在 sn-p 编辑器中，在 Save & Insert Into Post 按钮的正下方有一个 Tidy 按钮。我鼓励使用它来使每个人都更容易阅读代码。
你能编辑一下吗？我会接受你的修改。
无需接受我的编辑（我有 >2k 代表）:)。

【解决方案2】：

var region = document.getElementsByClassName("content");

for (var x = 0; x < region.length; x++) {
  var imgs = region[x].getElementsByTagName("img");

  for (var i = 0; i < imgs.length; i++) {
    if (imgs[i].getAttribute('src')) {
      imgs[i].setAttribute('data-src', imgs[i].getAttribute('src'));
      imgs[i].removeAttribute('src');
    }
  }
}

【讨论】：