Image loading firing prematurely // too fast
gkatsanos opened this issue · comments
I am using a Bootstrap Carousel trying to lazy load its images, and I noticed (in the network tab) that images are loaded very early. Now, I don't mind that much, as my main goal is the make initial rendering faster and cut down on http requests but I would like if I can control this a bit more.
I am assuming something is wrongly calculated with the current scroll position / threshold? Maybe the fact that only 1 image is visible after the Carousel script is initialized?
Here's the pen showing the problem/behavior:
https://codepen.io/gkatsanos/pen/dWXNEj
@callmecavs any hint?
@gkatsanos my guess is that 2 factors are contributing to the problem here.
- before images have loaded, they have 0 width and height (unless a
width/heightattribute is specified, or the images are given height in another way). so all the images may technically be in the initial viewport, and thus all loaded at the same time, the first time the script runs - layzr doesn't check image position relative to the viewport horizontally. so if the image is offscreen to the left/right, but vertically in the viewport, layzr will load it
closing this as the issue is imo specific to implementation details, but let me know if the above helps
I think 2. isn't happening here as the page is long enough (check the codepen minimal test case I built).
1 could though, so you think adding width/height attrs might circumvent it?
@gkatsanos give widths/heights a shot. i looked at the codepen you sent (thank you for doing so) and as far as I can tell everything is working correctly. it's hard to say for sure because the same image is repeated multiple times, and chrome intelligently only loads it once using the network, and subsequently from the cache - but as far as I can tell in the network devtools, all the images are loaded as soon as the page is, because they all have 0 height before loading.
Ignore the dummy placeholder 150x150 ones, these are just there to make the page long enough to see the bug. It's about the 3 big images with the very big filenames, very easy to spot in the network tab. The 2 first ones which are hidden onload, are loaded immediately, and the third one is loaded as soon as 1 scroll event triggers (regardless of where it's located in the viewport..) that can't seem right?
I made a video: https://ufile.io/qv93e
@callmecavs I guess the lazy loading doesn't work when image or its container are display: none so I could do it manually with the helper method right