javascript - Lazy load images without changing existing `src` attribute (not changing the HTML)? - Stack Overflow

admin管理员组

文章数量:1404927

Due to a constraint, we need to display HTML content from a different service which images are just typical <img src=".jpg"/>

Most of lazy loading libraries (e.g lozad.js) suggested removing src attribute and adding data-src otherwise browser will load each image immediately.

I can parse and transform the dom to conform the requirement but I feel adding extra overhead is defeating the performance purpose.

Is there any technique to achieve lazy loading without touching the HTML?

Due to a constraint, we need to display HTML content from a different service which images are just typical <img src="http://example./image.jpg"/>

Most of lazy loading libraries (e.g lozad.js) suggested removing src attribute and adding data-src otherwise browser will load each image immediately.

I can parse and transform the dom to conform the requirement but I feel adding extra overhead is defeating the performance purpose.

Is there any technique to achieve lazy loading without touching the HTML?

• javascript
• image
• web
• lazy-loading

Share Improve this question Follow asked Mar 18, 2019 at 18:54 zocoizocoi 1,2001010 silver badges1212 bronze badges 3

• 1 There is not. Don't worry about the overhead of a few extra bytes inside html, pared to even including 1 basic image is nothing. The problem is that images are loaded as soon as the img tag is encountered by the browser. And JavaScript will always be later so it can't intercept the image load.(some exceptions might be valid) – René Commented Mar 18, 2019 at 19:05
• @René I see, thanks for the ment. I meant the server overhead of parsing string into html and changing the attribute src to data-src. For big blob of HTML, it may matter. Maybe a global substring will help. – zocoi Commented Mar 18, 2019 at 20:08
• Well, you usually don't replace it inside a big text. You just change the src to data-src where the string is created. But even if you need string replacing inside a big chunk of html, it's not that bad. And by the time the html is too big for a string replacement you should worry about other things first ;-) – René Commented Mar 18, 2019 at 21:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

There is new HTML built-in support in lazy loading if your clients are using supported browsers you better use it

<img src="https://i.picsum.photos/id/238/300/300.jpg" loading="lazy" />

It will load when you scroll to the relevant section

If you're injecting the html snippet of the image element, you could put it in a span rather and manipulate the html later.

For example:

<div id="topNav">
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
    <div class="heightTest">
    </div>
    <span class="unloaded">
      <noscript>
        <img src="https://www.jpl.nasa.gov/images/universe/20170802/heliophysics-16.jpg">
      </noscript>
    </span>
  </div>

Then watch it with javascript:

function isElementInViewport (el) {
      var rect = el.getBoundingClientRect();
      return (
          rect.top >= 0 &&
          rect.left >= 0 &&
          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
      );
  }


  var images = document.getElementsByClassName('unloaded');
  function checkImages() {
    var clean = false;
    for(var i=0; i<images.length;i++){
      var el = images[i];
      if(isElementInViewport(el)){
        //replace the span's innerhtml with the noscript innerhtml.
        el.innerHTML = el.childNodes[1].innerHTML;
        //remove the class, since it's now loaded.
        el.classList.remove("unloaded");
        //we changed at least one element, so we'll want to get a new clean list.
        clean = true;
      }
    }

    if(clean == true){
      images = document.getElementsByClassName('unloaded');
    }
  }
  checkImages();
  window.addEventListener('scroll', checkImages, false);

This way you're waiting until the event to modify any HTML. An advantage here is if javascript isn't running, the images will load anyways. As well since it's a span you can set the size and background to a grey loading icon via css for the span class "unloaded".

本文标签： javascriptLazy load images without changing existing src attribute (not changing the HTML)Stack Overflow