Images not loading (data-loaded tag is injected, but no src tag)

[brunocloutier]

I have installed lozad.js, but no images are loaded. lozad.js has been installed through npm.

Here’s the JS code.

const observer = lozad('.lozad', {
  load: function(el) {
    console.log('Loading element');
    console.log(el);
  },
});
observer.observe();

And the HTML markup.

<img class="lozad" data-src="/static/dist/images/sequence/image-name.jpg">

lozad.js is triggered. I get console logs with the right elements, and data-loaded="true" is injected in the appropriate <img> tag. But no src is injected, no image is loaded.

The <img> tag looks like this once lozad.js is triggered.

<img class="lozad" data-src="/static/dist/images/sequence/image-name.jpg" data-loaded="true">

I am lost here, any idea?

[dipesh112]

const observer = lozad('.lozad', {
  load: function(el) {
      el.src = el.getAttribute("data-src");
  },
});
observer.observe();

Try this.. it will work

[Cadienvan]

Sorry @dipesh112 , what is the point in doing that for ourselves? Lozad should do exactly THAT for us.

[antony]

I think the first example is overriding the load function, with some console logging - but therefore removing lozad's functionality.

That's why it doesn't work (and that's why @dipesh112 has re-implemened it)