Modify the src to data-src JavaScript

Question

I want to replace src from data-src and I have the script but it's not working properly. Please modify this given script.

This is the script which I want to load before loading images but it's not working properly so please fix this.

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');
    }
  }
}

<div class='content'> <img src="img.jpg" alt="img"> </div>

Tony, all information belongs in your question, not down here. — isherwood, Jun 15 '21 at 15:14
`getElementsByClassName` returns a collection of elements. A collection does not have a method named `getElementsByTagName`; `img` !== `imgEl`; The code gets the `src` attribute, sets the `data-src` attribute to its value, then removes it. This has the affect of making all images break. — Heretic Monkey, Jun 15 '21 at 15:22

score 0 · Answer 1 · edited Jun 15 '21 at 15:26

0

A nice method for do that is using querySelectorAll for get a return of NodeList and can iterate with forEach callback, here an example:

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>

edited Jun 15 '21 at 15:26

Heretic Monkey

11,687
7
53
122

answered Jun 15 '21 at 15:19

Alumno Cabreado

191
8

Note that in the snippet editor, there is a Tidy button right below the Save & Insert Into Post button. I encourage its use to make code easier for everyone to read. – Heretic Monkey Jun 15 '21 at 15:24
Can you edit it ? I will accept your edit. – Alumno Cabreado Jun 15 '21 at 15:25
1

No need to accept my edit (I have >2k rep) :). – Heretic Monkey Jun 15 '21 at 15:26

score -1 · Answer 2 · answered Jun 15 '21 at 15:19

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');
    }
  }
}

Modify the src to data-src JavaScript

2 Answers2