Why doesn't adding loading="lazy" with JavaScript work to actually lazy load the images? - Stack Overf

admin管理员组

文章数量:1399320

I'm able to add the loading="lazy" attribute on individual images, or with JavaScript and apply them all at once.

But, when I do it with JavaScript, and then inspect the page, I see the images load on page load, but each image has the attribute attached.

Why does adding loading="lazy" with HTML load the image lazily, but adding the attrib with JavaScript doesn't provide the lazy loading behavior?

let img = document.querySelectorAll('img');
for (let i = 0; i < img.length; i++) {
  let images = img[i];
  images.setAttribute('loading', 'lazy');
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  margin-top: 2000px;
}

<div class="container">
  <img src="">
  <img src="">
  <img src="">
</div>

I'm able to add the loading="lazy" attribute on individual images, or with JavaScript and apply them all at once.

But, when I do it with JavaScript, and then inspect the page, I see the images load on page load, but each image has the attribute attached.

Why does adding loading="lazy" with HTML load the image lazily, but adding the attrib with JavaScript doesn't provide the lazy loading behavior?

let img = document.querySelectorAll('img');
for (let i = 0; i < img.length; i++) {
  let images = img[i];
  images.setAttribute('loading', 'lazy');
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  margin-top: 2000px;
}

<div class="container">
  <img src="https://images.unsplash./photo-1481349518771-20055b2a7b24">
  <img src="https://images.unsplash./photo-1494253109108-2e30c049369b">
  <img src="https://images.unsplash./photo-1494232410401-ad00d5433cfa">
</div>

• javascript
• lazy-loading

Share Improve this question Follow asked Nov 3, 2021 at 4:57 MillhornMillhorn 3,17677 gold badges4545 silver badges9292 bronze badges 7

• 10 The JavaScript doesn't run until after the images have already started loading. So it's too late to make them load lazily. – Barmar Commented Nov 3, 2021 at 4:59
• So running that particular script in the head would do the trick. – Millhorn Commented Nov 3, 2021 at 5:01
• 4 If you run it in the head then it won't be able to find the DOM elements to change their attributes. – Barmar Commented Nov 3, 2021 at 5:02
• Any ideas on this? I have many images on my site that I need to apply this to... like hundreds. – Millhorn Commented Nov 3, 2021 at 5:04
• 1 Can you change the src attribute before it reaches the browser? if you change src to data-src the browser won't load it. Then you can add the loading="lazy" attribute and then change the src to the value of data-src. – volt Commented Nov 3, 2021 at 5:45

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

The typical solution to this is to use data-src attributes instead of src. Then, when you're ready, you switch them to src attributes.

That means the images don't get loaded by the browser until you decide.

This is monly handled by libraries like lazysizes. But here's a general concept:

const images = document.querySelectorAll('img');
images.forEach(img => img.src = img.dataset.src);

<img data-src="https://via.placeholder./350x150" loading="lazy">
<img data-src="https://via.placeholder./350x350" loading="lazy">

It's kind of a catch 22. You need to run the JS before the HTML to set the attribute before it is already loading, but you can't add an attribute to an element that doesn't exist.

You could try creating the image element manually using JS, then adding the attribute, then adding it to the dom.

Maybe something like this:

const imgEl = document.createElement("img");
imgEl.src = "https://i.sstatic/ZCVxN.jpg?s=64&g=1"
imgEl.setAttribute('loading', 'lazy');

const body = document.querySelector("body")
body.appendChild(imgEl);

本文标签：