How to implement lazy loading on select product images?

How to implement lazy loading on select product images?

DAGNORAK
Excursionist
69 0 6

I’ve stopped lazy loading on my product pages, but I want the second third etc images to be lazy loaded. How do I do this while making sure to first image isn’t ? Thanks in advance !! 

Replies 2 (2)

learningAll
Visitor
1 0 0

you can add manual codes to make easy load specific images.

 

https://www.learningall.com

BaileyPaserk
Shopify Partner
116 9 27

Generally speaking, with sites I have worked with, lazyloading either applies to all of the product images or none. Since it is recommended that lazyloading is turned off for images at the top of the page what I would do is turn it off. But if you want to customize this further I usually leave it on and then edit the code. 

I would then edit the product image loop to include lazyloading attribute unless loop count - 1. Depending on the theme, they might render the thumbnail images in a completely different loop. This can be a bit more silly if they are vertical scrolling as some are off page. But if they are all on page, I leave those to not show lazyloaded either since all thumbnails load at once and are often all visible at top half of page. 

Bailey Paserk