-1

Edit: Solved it and what I wanted had nothing to do with lazyloading. I'm leaving the original question and post as it is but removed the excerpt (since the excerpt is pretty much pointless and I'm deleting it on codesandbox.io). The answer which I came up with is below the question.

A user visits a page with 20 images. However I do not want all images to instantly load as the website will feel slow if the images are big or if there are way more images.

If the user is in a certain image, load that image and preload the next 5 images (for example) and not the rest. As the user scrolls, the website will continuously load the next 5 images. I already have intersection observer set up as well as a custom image loading component.

I know of a solution where I keep calling my server as the user scrolls. However I would not like that as it might be too excessive. (And it's an image focused/heavy website)

Preferably solved using vanilla javascript or css. If the solution might be too complicated, I wouldn't mind using a lightweight package. I have no clue as to where to start with this.

Note: The project is running on Nuxt.js

StarPass
  • 51
  • 1
  • 5
  • 1
    [Something in my web site or project doesn't work. Can I just paste a link to it?](https://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it) – StevenSiebert Aug 27 '21 at 10:14
  • why that link in your comment? – StarPass Aug 27 '21 at 11:39
  • 2
    This is some kind of "I do have a bug here can you fix it for me" situation hence the link of @Fabalance. What did you tried and what do you struggle with? Did you gave a read to this one? https://web.dev/lazy-loading-images/ – kissu Aug 30 '21 at 14:50
  • 1
    Thanks @kissu for the article! I think I have an idea on the implement it now. Will update if successfull – StarPass Aug 31 '21 at 06:10
  • Also, check this one: https://vuedose.tips/use-responsive-images-with-v-lazy-image – kissu Aug 31 '21 at 17:04

1 Answers1

1

Well I coded out what I needed thanks to Kissu for the article. Although what I wanted had nothing related to lazy image, the article somehow gave me a hint on how it can be done. It was a simple use of a combination of intersection observer, conditionals and "v-if" for rendering that component

  1. Set up intersection Observer to track which image index the user is on.
  2. Add a variable to track the furthest image the user has scrolled to. So our website renders and keeps all previous images on the browser)
  3. Set up a "v-if" as to render the next few images. i.e. "v-if" - Render the image of the index that the user is on + next images. E.g. To preload next 5 image
<imageComponent v-if="lastImgViewed+5 > CurrentImage"></imageComponent>

That's It! Simple! Although I don't know if it's lean or the best way to do this - performance wise.

StarPass
  • 51
  • 1
  • 5