Lazy load ScrollTrigger demo loading images twice

[ekfuhrmann]

I was playing around with your lazy loading scrollTrigger demo, and realized that it seems to be duplicating the high-res image download twice, essentially doubling the size of the page.

Not being entirely familiar with the methods being used for this effect, I was unable to figure out how to prevent it from double triggering.

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

[OSUblake]

Not sure what you mean. Try using your own images. picsum is an image server that has to redirect to get the actual image. 

[ekfuhrmann]

Sorry, let me rephrase a bit. I added this exact codepen to a local project I'm working on that is using local files, and I'm still getting hit with downloading the files twice when checking the networking tab of developer console.

 

For example it looks like this, where the bedroom-pre.jpg is the low-fi image, while the bedroom.jpg is the hi-fi image.

 

As you can see, it's getting served up twice, and I'm seeing this happen in the demo on codepen as well, albeit it's a bit harder to parse there due to the picsum hosting.

 

My <img/> markup looks like this:

<img class='lazy' src='bedroom-pre.jpg' data-src='bedroom.jpg' alt='' />

And I'm using the identical JS found in the codepen.

 

Hope that helps clarify a bit?

[GreenSock]

I think that's simply because it has to swap the src on both images so that it can do the crossfade when the big version loads. And the browser shouldn't actually need to download the whole thing again - it's simply pulling it from its cache. 

[ekfuhrmann]

Ah I see. So the issue was that I had Disabled cache toggled on in the Network tab, which was causing it to re-download the image. Under normal circumstances, to your point, it would pull from the cache and not re-download.

 

Thanks for helping with that.

[OSUblake]

Are you even using a server? And does it have the correct headers? You shouldn't see it appear more than once in the network tab. Once it's cached it will show that.

 

  

 

[ekfuhrmann]

4 minutes ago, OSUblake said:

Are you even using a server? And does it have the correct headers? You shouldn't see it appear more than once in the network tab. Once it's cached it will show that.

 

  

 

I was running a localhost, but the issue was due to me having Disable cache enabled in my developer tools. Once disabled, it was displaying once.

 

No surprise, it was a mistake on my part.