lozad.js
lozad.js copied to clipboard
lozad breaks (webpack) responsive-loader
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
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.
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.
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