lazy loading src vs data-src

texanbok
New Member
3 0 0

Hi there,


Can't figure out why when I change src to data-src it doesn't find my images

 

Any thoughts?

Its on my home page

www.boltontechnical.co.za

Sample Code I'm referring to:

<div class="top-product-image"><img class=“lazyload” src="{{ 'product-wilsonpro-a500.jpg' | asset_url }}" alt="WilsonPro A500 Signal Booster"/></div>



Replies 2 (2)
JoesIdeas
Shopify Expert
1428 127 384

data-src is used as a marker for lazy loading libraries to identify images they need to replace with src attribute when the image scrolls into view.

 

If the image isn't loading, it means you either don't have a lazy loading library set up, or it's not configured properly.

If you need some help, I wrote a guide to lazy loading for Shopify: https://speedboostr.com/shopify-lazy-loading.

 

From your code snippet, the html <img> element looks good, so I think you just need to include a lazy loading library (that will find those images and replace the data-src with src when the image is in view).

Creator of Order Automator (auto tag orders / customers + auto fulfillment + more automations). Creator of Shopify Analyzer (1st performance analysis tool for Shopify sites, free for the community). Founder of Speed Boostr (Shopify optimization experts + app developers). More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
Jose13
Shopify Partner
120 1 12

Is it possible to lazyload hardcoded images on a theme? I have a custom HTML section on my theme where I coded some images. Since that section is outside the Theme assests scope, I can't use data-src to lazyload the images. My guess is that I would have to modify the js library or code my own section using the schema to select the images and render them through liquid?