Jump to content
Search Community

ScrollTrigger Image lazy loading - more simplified

mrWilson test
Moderator Tag

Recommended Posts

Hi, 

 

I have a question about the ScrollTrigger Image lazy loading.  The demo sample uses HTML markup like this: 

 

<section class="preloadSection">
  <div class="deferredImageContainer">
    <img class="deferredImage" width="1200" height="600" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600">
  </div>
</section>

Is it possible to do this much simplified? As follows:

 

<img class="lazy" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600">

 

Thanks.

 

 

See the Pen YzydvBE?editors=1010 by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Absolutely. Here's a simplified version the way I'd do it: 

See the Pen OJMaEOP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Actually, I'd probably simplify it even more by eliminating the data-src and using logic in the JS to build that dynamically based on the original src (like just change the final two numbers). But I didn't want to get too fancy. Let me know if you need more help with that. 👍

  • Like 3
Link to comment
Share on other sites

Thanks, you're my superhero.  :) 

 

8 hours ago, GreenSock said:

Actually, I'd probably simplify it even more by eliminating the data-src and using logic in the JS to build that dynamically based on the original src

 

That would be nice. I think many others also will find it useful. Different solutions are always welcome, it helps to better understand and learn.

 

Thank you again. 👍

  • Thanks 1
Link to comment
Share on other sites

3 hours ago, mrWilson said:

That would be nice. I think many others also will find it useful. Different solutions are always welcome, it helps to better understand and learn.

 

I wasn't quite sure - were you asking to see a solution like this? (where it dynamically builds the URL)

Link to comment
Share on other sites

11 hours ago, mrWilson said:

Your solution above is perfect for me. But another version you mentioned (where it dynamically builds the URL) would be nice too, if you don't mind. Just to understand how these things work. :) 

Here's a fork that shows the dynamic solution: 

See the Pen LYGMVWr by GreenSock (@GreenSock) on CodePen

 

You can change the fullRes variable to whatever you want. 

 

Is that what you're looking for? 

  • Like 3
Link to comment
Share on other sites

Thank you, @GreenSock. Sorry for the late reply. Yes, that's what I was looking for. Both of your examples are awesome, but I found something I didn't notice before. Both samples work perfectly when the page is scrolled down. Unfortunately, lazy load does not work in both directions- when you refresh the page and scroll up.

Link to comment
Share on other sites

2 hours ago, mrWilson said:

Unfortunately, this doesn't work when scrolling up. It loads full size images instantly.

If you want to prevent that, use limitCallbacks:

ScrollTrigger.config({ limitCallbacks: true });

However that will make is so elements in the viewport on page refresh aren't loaded (you'd have to scroll up or down then back to them).

 

As such you need to detect if elements are in the viewport on load and call the lazy load function or not. Here's one way to do that.

Hmm. Apparently I'm just getting some bad loads.

Link to comment
Share on other sites

Yes, your last example seems to be working now. Thank you. Would you do the same with your first (without dynamically builds the URL) example?  And one more thing. It would be nice if the "data-src" will be removed when the image is loaded.

 

Link to comment
Share on other sites

12 minutes ago, mrWilson said:

Would you do the same with your first (without dynamically builds the URL) example?  And one more thing. It would be nice if the "data-src" will be removed when the image is loaded.

Hey Mr Wilson. What's stopping you from making those changes yourself? I don't mean to be a pain, but we can't help with every step of your project. If you have specific questions about how to use GSAP please ask and we'll be happy to help! :) 

Link to comment
Share on other sites

  • 7 months later...

Hey @Tazintosh. These forums are for GSAP-related questions. Given the demos in this thread already show how to do lazy loading using ScrollTrigger I don't think it's really within scope for us to debug your custom code for free. If you have a specific GSAP-related question let us know and we'll be happy to help :) 

 

I encourage you to start from the demo above once again and slowly build out piece by piece, checking to make sure it works as you go, until you get it working the way that you need it to.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...