lozad.js icon indicating copy to clipboard operation
lozad.js copied to clipboard

lozad breaks (webpack) responsive-loader

Open gacallea opened this issue 4 years ago • 3 comments

I'm giving lozad a try after reading your featured CSS Tricks article, and I love it. There's only one issue: it breaks responsive-loader generation of any jpg specified in an HTML file (I'm doing responsive images with data-srcset and data-src as per documentation). CSS background jpg are fine.

Expected Behavior

  • without lozad everything works fine and responsive-loader creates the responsive images, they turn fine in bundled code

Current Behavior

  • with lozad, only CSS jpg and HTML png work. any other jpg in HTML is a 404 because it won't be generated.

Possible Solution

  • I have no clue sorry

Steps to Reproduce (for bugs)

  • is better to link you to my repo so you can check all the config (master and lozad branches). https://gitlab.com/gacallea/gentlewashrec
  • the master builds fine
  • lozad branch has the issue

Context

  • trying to use lazy loading for responsive images

Tested on:

  • Browser Name and version:
  • (all latest): chrome, firefox, safari, opera, brave, vivaldi.
  • Operating System and version (desktop or mobile): macOS Mojave (latest patch)

EDIT:

this responsive-loader https://github.com/herrstucki/responsive-loader

gacallea avatar Nov 30 '19 18:11 gacallea

ps: the lazy loading works fine and all. it's just that it breaks jpgs. you could try using responsive loader with lozard to reproduce if checking against my repo is not an option.

gacallea avatar Nov 30 '19 18:11 gacallea

hi,

I've just tried to implement lazy loading using IntersectionObserver directly and it also breaks the images. This time it breaks all of them (all 404) but it doesn't use responsive images at all (just the link to the originals). I hope this details can help somehow.

gacallea avatar Dec 01 '19 11:12 gacallea

Since I don't know where the issue lies, I've opened an issue on responsive loader github as well: https://github.com/herrstucki/responsive-loader/issues/98

gacallea avatar Dec 02 '19 09:12 gacallea