menu

Gatsby.js

Fast in every way that matters. Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.

Channels
# All channels
view-forward
# General
view-forward
# I Made This
view-forward
# Meta
view-forward
# Themes
view-forward
Team

Need help: Using gatsby-image with Intersection Observer

February 6, 2020 at 2:15pm

Need help: Using gatsby-image with Intersection Observer

February 6, 2020 at 2:15pm
Hi, I am using gatsby-image to lazy-load and blur up my image for a gallery page. Although, I wanted the images to be lazy-load only when I'm through the fold view and scroll to the next section. I know Intersection Observer can really be helpful for this but I'm new and I couldn't find any good docs for the same. Please help with the same, thanks!

February 6, 2020 at 4:22pm
gatsby-image already does this using IntersectionObserver. This particular section is what creates the blurred placeholder during SSR, and this is what loads the real picture.
If, on the other hand, you wanted to only begin that whole process during runtime, so that not even the blurred placeholders are loaded until you scroll, then you could create your own IntersectionObserver, and trigger a gatsby-image render at maybe double the margin they already use.
Or were you trying to move away from gatsby-image altogether?
  • reply
  • like
Yes, I wanted the blurred placeholders to be loaded only on scroll by triggering it on certain vh. I am not sure how to do this by creating my own IntersectionObserver. Thanks for making it more clear though.
  • reply
  • like
Oh, I see. Okay, so first you need to create your own IntersectionObserver. The link to gatsby-image will show that in practice, or you can check out the api reference, or maybe even this tutorial.
The way I might do it is wait for my container component to mount, then at the bottom create some kind of anchoring element. Attach your IntersectionObserver to that anchoring element, so that when it comes into view, it triggers a load. Kind of like their example in the mozilla api reference:
var intersectionObserver = new IntersectionObserver(function(entries) {
// If intersectionRatio is 0, the target is out of view
// and we do not need to do anything.
if (entries[0].intersectionRatio <= 0) return;
loadItems(10);
console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));
There's likely a way to make it work off of the bottom margin of your container component. Maybe by using IntersectionObserverEntry.target, and the scroll position of the bounding client rect. In that case, it would probably be just as effective to use the scroll event (and more supported, I believe), because your container element is always going to be in the viewport, so will always trigger your IntersectionObserver.
  • reply
  • like
Another alternative, I think, is to attach the last of your currently loaded images to the IntersectionObserver as it mounts. Then, when it is reached, load the next batch, and detach that one from the IntersectionObserver
Edited
  • reply
  • like

February 7, 2020 at 6:27pm
That helps! Thanks a lot!
like-fill
1
  • reply
  • like

February 23, 2020 at 5:18pm