ScrollTrigger for lazy loading images and video

[Chuck Taylor]

Hey everyone,

This really isn't a question, but rather I wanted to share another possible use for the scrolltrigger plugin, which I had not seen mentioned. Using the callbacks provided from the plugin, I have experimented with using scrolltrigger to lazy load videos on my website.

 

I am basically following the guides provided by Google at: web.dev/lazy-loading-video/

 

In their example, they give their video source a data attribute such as data-src="myVideo.mp4"

Then their javascript, when triggered, replaces the video's src attribute with that referenced in the data-src attribute. Lastly they call load() on the video to get the resource.

 

The great thing with ScrollTrigger in this case is that not only is the amount of code needed a lot less, but you have full control over when the lazy loading is triggered, as you can set the trigger start value to whatever you want.

 

You can see this working at my website chucktaylor.dev

 

I'd be happy to know if anyone sees any potential issues with this use of the plugin.

[ZachSaucier]

Hey Chuck. There shouldn't be any issues using ScrollTrigger in this way. In fact, lazy loading is one of the demos listed in the ScrollTrigger documentation