Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mrWilson

ScrollTrigger Image lazy loading - more simplified

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

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. :) 

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

16 minutes ago, mrWilson said:

Unfortunately, lazy load does not work in both directions- when you refresh the page and scroll up.

Apply the same function to the onEnterBack:

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

  • Like 1
Link to comment
Share on other sites

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

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

Looks pretty good to me, @mrWilson. Is it working well for you? Did you have a specific question about it? 

Link to comment
Share on other sites

1 hour ago, GreenSock said:

Did you have a specific question about it?

How to get rid of data-src when an image is loaded. I can't handle it myself. Sorry.

Link to comment
Share on other sites

I ended up with this. Lazy load in both directions + removing "data-src" attribute if image is loaded.

 

See the Pen BajXJYB by mrWilson123 (@mrWilson123) on CodePen

 

Thank you for your time. :) 

Link to comment
Share on other sites

  • 7 months later...

Hi folks,

I tried to play with mrWilson last post and put it into my function (much reduced for the test purpose).

I cannot figure out why all my images are instantly revealed.

 

Any idea?

See the Pen GRNGENZ by Tazintosh (@Tazintosh) on CodePen

Link to comment
Share on other sites

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

Sorry for my misunderstanding considering the number of code evolutions that have been made above and the fact my code is indeed using GSAP.

Link to comment
Share on other sites

I've now copy/paste the code above. I guess it's now GSAP related question.

See the Pen GRNGENZ by Tazintosh (@Tazintosh) on CodePen

 

EDIT: ups wait, -50% was a first issue (for my need/understanding).

Put it to 50% loading is fine and obvious.

Will digg on this following your recommandation.

 

EDIT2: issue was simply my console.log

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.
×