jesusbotella/ngx-lazy-load-images

Add srcset option

Closed this issue · 2 comments

Looks like it only need the following changes

  getAllImagesToLazyLoad(pageNode: HTMLElement) {
    return Array.from(
      pageNode.querySelectorAll(
        'img[data-src], [data-srcset], [data-background-src]'
      )
    );
  }
  onImageAppearsInViewport(image: any) {
    if (image.dataset.src) {
      this.renderer.setAttribute(image, 'src', image.dataset.src);
      this.renderer.removeAttribute(image, 'data-src');
    }

    if (image.dataset.srcset) {
      this.renderer.setAttribute(image, 'srcset', image.dataset.srcset);
      this.renderer.removeAttribute(image, 'data-srcset');
    }

    if (image.dataset.backgroundSrc) {
      this.renderer.setStyle(
        image,
        'background-image',
        `url(${image.dataset.backgroundSrc})`
      );
      this.renderer.removeAttribute(image, 'data-background-src');
    }

    // Stop observing the current target
    if (this.intersectionObserver) {
      this.intersectionObserver.unobserve(image);
    }
  }

Happy to do a pull request if needed.

Yes, go ahead please, and do a PR! This is a thing that I thought a lot of time ago, but never got time to do it and test properly :)

I included your PR in the latest release, and it works like a charm! ✨

I am going to close this issue but feel free to reopen it if there is something to fix related to this.