bbc / Imager.js

Responsive images while we wait for srcset to finish cooking
Apache License 2.0
3.84k stars 224 forks source link

[Question] Extra offset for `isThisElementOnScreen` method? #101

Closed paulredmond closed 9 years ago

paulredmond commented 10 years ago

I am using lazyload: true but I'd like to trigger load for images offscreen that are close(ish) to being in the viewport. My team is wishing the images were loading sooner, but I still want some lazy loading ability.

I am proposing the idea of being able to configure an additional offset that triggers loading earlier if desired. I know the idea of lazy loading is muddied a little with this concept, but I am seeing a need for it in my projects sometimes and still provides some lazy loading benefit (the default would be 0). I could submit a really simple PR. Thoughts?

Example:

this.lazyLoadOffset = opts.lazyLoadOffset || 0;
new Imager('.the-target', {
    lazyload: true,
    // Offset would start at Imager.getPageOffset() + clientHeight
    lazyLoadOffset: document.documentElement.clientHeight
});
benjambles commented 10 years ago

We've added the exact same ability for the new version of Time Out, (can be seen for the Las Vegas site) a 200px offset really helped with mobile connections... Although we also had to add styles that create a 16:9 placeholder, all of our images are this ratio, to each image to prevent page jumps as images load.

Works a treat

thom4parisot commented 10 years ago

Hello :-)

Nice to learn Time Out uses Imager as well! Adding an offset would not involve too many lines of code so I am quite keen on that. So feel free to contribute it :-)

Although on the long-term, I would rather see the lazy loading feature to be put off Imager, but to make Imager to be able to respond accordingly to whatever lazyloading library is used.