Pipeline Theme Lazy Load

New Member
8 0 0

I'm trying to set up lazy loading on images. I've added the javascript library and the script tag, but I don't know how to add the "lazyload" class and data-src placeholder.

0 Likes

follow this :https://appelsiini.net/projects/lazyload/

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
New Member
8 0 0

How do I implement this to a Shopify website?

0 Likes
Astronaut
1091 150 274

You just have to find your images in your store and it's as easy as adding the attributes to the elements. So say you have a banner image. You'll want to go to whatever section that is in your sections folder, for the sake of the argument lets just say that's banner.liquid. Open banner.liquid and then look for the img tag. It'll probably look something like:

 

<img src="//cdn.shopify.com/s/files/1/0561/0261/files/your-file.jpg?123423">

What you'll want to do is change that src to data-src, and add the class lazyload:

 

<img class="lazyload" data-src="//cdn.shopify.com/s/files/1/0561/0261/files/your-file.jpg?123423">
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
8 0 0

There's no one code that would target all the images?

0 Likes
Astronaut
1091 150 274

Unfortunately no, you could potentially write a script to change all src attributes to data-src attributes and add a class attribute to all images, THEN run lazy loading, but by that time your images would have already started loading so there's really no point. In my opinion anyway, someone else may have a better idea on how to automate the process, but I think overall you'd be better off doing it manually so you don't have to hope that your javascript initializes in the right order.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
8 0 0

Makes sense, but now I couldn't seem to find where exactly the image codes are.

0 Likes