Testing for image element

[aderaaij]

Hi! Thanks for the awesome library!

I was wondering if it would be an idea to actually test for the img element in the check that you do? Seeing that the src attribute can only be applied to a limited amount of elements, it would be easy to test for those and add specific functionality for them, and otherwise for background images. This way we can give the background image a regular data-src as well, instead of the data-background-image we've got now.

Something like:

if (element.tagName === 'IMG') {
  if (element.dataset.src) {
    element.src = element.dataset.src;
  }
  if (element.dataset.srcset) {
    element.srcset = element.dataset.srcset;
  }
} else {
  element.style.backgroundImage = `url(${element.dataset.src})`;
}

maybe?

[ApoorvSaxena]

Hi! Thanks for the awesome library!

Your welcome :)

Regarding:

I was wondering if it would be an idea to actually test for the img element in the check that you do? Seeing that the src attribute can only be applied to a limited amount of elements, it would be easy to test for those and add specific functionality for them, and otherwise for background images. This way we can give the background image a regular data-src as well, instead of the data-background-image we've got now.

Can you share an example where the image needs a src and background-image as well?

[aderaaij]

Oh absolutely never! I was strictly talking about data attribute naming. data-background-image does make sense but I just thought that it might be safer to test on tagname in general.

[ApoorvSaxena]

@aderaaij considering that Lozad.js allows lazy loading of several other elements such as iframes, video, picture elements etc. as well, thus will be better to have the implementation as is