0

lazysizes seems to simple to use, but I can't get it to actually lazy load an image with react... it loads the bottom image thats out of the viewport before it's scrolled into view, as you can see in this minimal codesandbox example.

const id = Math.floor(Math.random() * 500);

<img
 style={{ width: 500, height: 500 }}
 src={`https://picsum.photos/id/${id}/20`}
 data-src={`https://picsum.photos/id/${id}/1000`}
 className="lazyload blur-up"
 alt=""
/>

.blur-up {
  -webkit-filter: blur(30px);
  filter: blur(30px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

(this code is copied almost exactly from the lazysizes docs)

What am I doing wrong?

benmneb
  • 1,773
  • 1
  • 15
  • 26
  • The code in the sandbox appears to run as expected. It first loaded the blurry small/low-res image before swapping over to the larger higher-res image. I imagine if you've fairly decent internet speed the images will load sufficiently well. – Drew Reese Aug 28 '21 at 07:14
  • it does for the top image. but the bottom image thats off the viewport shouldn't load the hi-res image until its scrolled into view right? thats what lazy loading is... at the moment as soon as you scroll down to it the high res image is already loaded and is visible. you can confirm this with the network dev tools (filter by image) – benmneb Aug 28 '21 at 09:31
  • I suppose that depends on a specific definition of lazy loading. I took a quick read over the docs and it seemed (to me) that lazysizes was more about rendering lo-res "placeholders" until the high-res images were loaded and could be swapped in. Though there are some blurbs that loosely imply it watches for the visibility of elements. I don't know what "view threshold" it may be using for any sort of virtualization or lazily loading of assets. – Drew Reese Aug 28 '21 at 09:41
  • true. even with >400vh off screen it still loads before its in viewport, so i think i was taking the definition of lazy loading differently from them... [from web.dev](https://web.dev/lazy-loading/): `"Lazy-loading is a technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, "non-critical" is often synonymous with "off-screen".` _often_, but apparently not _always_! – benmneb Aug 28 '21 at 10:08

0 Answers0