mrWilson Posted July 18, 2020 Share Posted July 18, 2020 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 More sharing options...
GreenSock Posted July 19, 2020 Share Posted July 19, 2020 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. 👍 3 Link to comment Share on other sites More sharing options...
mrWilson Posted July 19, 2020 Author Share Posted July 19, 2020 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. 👍 1 Link to comment Share on other sites More sharing options...
GreenSock Posted July 19, 2020 Share Posted July 19, 2020 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 More sharing options...
mrWilson Posted July 19, 2020 Author Share Posted July 19, 2020 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 More sharing options...
GreenSock Posted July 20, 2020 Share Posted July 20, 2020 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? 3 Link to comment Share on other sites More sharing options...
mrWilson Posted July 24, 2020 Author Share Posted July 24, 2020 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 More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 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 1 Link to comment Share on other sites More sharing options...
mrWilson Posted July 24, 2020 Author Share Posted July 24, 2020 Unfortunately, this doesn't work when scrolling up. It loads full size images instantly. Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 24, 2020 Share Posted July 24, 2020 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 More sharing options...
GreenSock Posted July 24, 2020 Share Posted July 24, 2020 You shouldn't need to check to see if it's in the viewport. Here's what I'd do: See the Pen gOPEEzY?editors=0010 by GreenSock (@GreenSock) on CodePen Does that work for you? 2 Link to comment Share on other sites More sharing options...
mrWilson Posted July 31, 2020 Author Share Posted July 31, 2020 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 More sharing options...
ZachSaucier Posted July 31, 2020 Share Posted July 31, 2020 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 More sharing options...
mrWilson Posted July 31, 2020 Author Share Posted July 31, 2020 This is what I have reached so far. Not sure if this is the right way. See the Pen oNbKLvL by mrWilson123 (@mrWilson123) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted July 31, 2020 Share Posted July 31, 2020 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 More sharing options...
mrWilson Posted July 31, 2020 Author Share Posted July 31, 2020 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 More sharing options...
GreenSock Posted July 31, 2020 Share Posted July 31, 2020 Why would that be helpful? Seems to me like extra processing with no real benefit, but maybe I'm missing something. Anyway, I think this is what you're looking for: https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute 1 Link to comment Share on other sites More sharing options...
mrWilson Posted August 1, 2020 Author Share Posted August 1, 2020 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 More sharing options...
Tazintosh Posted March 3, 2021 Share Posted March 3, 2021 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 More sharing options...
ZachSaucier Posted March 3, 2021 Share Posted March 3, 2021 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 More sharing options...
Tazintosh Posted March 3, 2021 Share Posted March 3, 2021 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 More sharing options...
Tazintosh Posted March 3, 2021 Share Posted March 3, 2021 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now