Lazy load images with multiple sources

[rami essam]

I was checking the code pen for lazy load images from the documentation here 

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

I'm a beginner so bare with me, why is images have both src and data-src, shouldn't it just be data-src then it will be loaded later when it comes to viewport ?

 

also what if I'm using picture to load webp images,

do I just add dara-srcset to the source and the class and data-src to the image like so  ?

 

<picture>
   <source type="image/webp" data-srcset="example.webp">
   <source type="image/jpeg" data-srcset="example.jpg">
   <img src="example.jpg" data-src ="example.jpg" class="lazy" alt="">
 </picture>

 

See the Pen vYGYaPx by dovisally (@dovisally) on CodePen

[ZachSaucier]

2 hours ago, rami essam said:

why is images have both src and data-src, shouldn't it just be data-src then it will be loaded later when it comes to viewport ?

This is because the image in the SRC is a really small version of the image (20px by 10px) while the full size that's loaded later is 1200px by 600px. Since the image is scaled up, it produces a blurry version for very little data size. Then the full version is loaded later. 

 

2 hours ago, rami essam said:

what if I'm using picture to load webp images,

do I just add dara-srcset to the source and the class and data-src to the image like so  ?

With the picture element it's a bit more complex. You'd have to detect which image formats a given browser supports and give the first one (in the order that you want to serve the formats in) that it supports. It might be helpful to use a lazy loading library in that case.

 

Or you could just use the loading="lazy" attribute but it's support isn't that great still. Still, you could view it as progressive enhancement.

[rami essam]

@ZachSaucier Hello Zach thank you so much, yea it does seems complicated for a beginner like me

how ever when i add loading lazy there is an issue with scrolling since i'm using scrollTrigger to achieve smooth scrolling for the whole website

 

just for you to remember here is the code i copied from another post on here to achieve whole page smooth transition 

JS

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
function smoothScroll() {
  const container = document.querySelector('#_layout');
  let height;
  function setHeight() {
    height = container.clientHeight;
    document.body.style.height = `${height}px`;
  }
  ScrollTrigger.addEventListener('refreshInit', setHeight);

  gsap.to(container, {
    y: () => -(height - document.documentElement.clientHeight),
    ease: 'none',
    scrollTrigger: {
      trigger: document.body,
      start: 'top top',
      end: 'bottom bottom',
      scrub: 0.9,
      invalidateOnRefresh: true,
    },
  });
}
smoothScroll();

 

HTML

<main id="_app">
  <div id="_layout">
  	<!-- content -->
  </div>
</main>

 

CSS

#_app {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#_layout {
  padding: 1.5vw;
  margin: 0 auto;
  overflow: hidden;
}

 

If the question is complicated or annoying please ignore it, 

if you just can explain to me why there is scrolling issues when i add loading lazy with this code 

 

what happens is when i scroll i can't see the  section where i added loading lazy to the images

like the scrollbar comes to and end early on like this section doesn't exist

 

thank you in advance

[ZachSaucier]

Please make a minimal demo if you'd like debugging help.

 

[rami essam]

@ZachSaucier  Thank you for your time and efforts, i've updated my thread please take a look,

only the first image is loaded other images are ignored, i added some dummy text just to give room to scroll

[ZachSaucier]

Does the demo recreate the issue that you're seeing? I'm able to scroll down and see all 3 images...

[Dovisally]

Yes on my browser (firefox) it does, i will clear my cache and history and try different browser and check again

[Dovisally]

I tested on firefox, chrome, edge same thing for me, i'm only able to see the first image,

i noticed that when i resize the browser I'm able to see everything fine

[ZachSaucier]

You should call ScrollTrigger.refresh() after the images load since they are changing the page's height. Alternatively set an explicit width and height on the images (CSS can still size them, but the browser needs the dimensions to render them before they load).

document.querySelectorAll("img").forEach(img => {
  if(!img.loaded) {
    img.addEventListener("load", () => ScrollTrigger.refresh());
  }
});

With that being said, if you're going to do smooth scrolling then we recommend using a smooth scrolling library because your current approach won't pair well with other scroll animations. We talk about how to do that in the .scrollerProxy() docs.