Feature request: Load images when X pixels away from viewport

[stammy]

While the triggerLoad functionality immediately loads certain assets, it would be nice to have the ability to load images that are almost in the viewport, specifiable by pixels near the viewport. For example 500.

The idea here is to prevent the visible loading/flickering of assets loading once they are in the viewport, especially on sites with lots of photos where the user may be scrolling at a faster pace. I used to use a library called unveil (http://luis-almeida.github.io/unveil/) where I would specify it load images a 1000px scroll in advance.

I realize doing this is not entirely in the spirit of performance and data saving but would be a nice publisher setting if user experience is a bit higher priority.

[ApoorvSaxena]

@stammy this functionality is available in Lozad using rootMargin attribute, as specified in the usage, here's a detailed explanation of the rootMargin attribute as per IntersectionObserver specs.

Example from the documentation:

const observer = lozad('.lozad', {
    rootMargin: '10px 0px' // syntax similar to that of CSS Margin
});
observer.observe();

[stammy]

Ohh, that makes much more sense now. Thanks so much for the clarification! I just added lozad and a few other things to my site and photoblog over the holidays and it's working great. For example: https://paulstamatiou.com/photos/africa/southern-serengeti-tanzania/

[ApoorvSaxena]

Great, glad to see you using it. Loved your shots and photoblog, awesome work there.

[sheriffderek]

Just tacking onto this / (since I wrote out a whole thing before finding this question already mentioned)

Questions regarding rootMargin and threshold. Can an offset be set? Say, 2 screens height = load? I'd love to load the images before they are visible. I would expect there to be an offset based on scroll position or something along those lines that is relative to the window.

I was confused by the spec - and also couldn't quite tell how the root margin worked in the readme here. Maybe we can clarify that with a few examples. I was worried that it was only observing the cross-over.

It's great to know when something is in the viewport - but my use case is often that I want to know when something it 'coming up' to the viewport. I absolutely never ever have images where I actually know their size these days. It's really hard to smoothly work a skeleton and a reasonable fade-in that feels nice once the item is already on the screen when you don't know it's ratio - and it's size is based on screen/window width. Basically, I want to lazy load things - and also never have a bunch of blinky loading and layout clunk.

Excited to try a few things with that rootMargin. Thanks!

Here were our explorations - in case it helps anyone: https://codepen.io/pxlagency/pen/RvbNPa?editors=0011