Why isn't my lazy loading for images functioning properly?

[phpfaruk]

I have added lazyload class but it is not working.

when i check inspect element , it is show me lazyloaded. but not working.

how can I fix it?

see screenshot please.

[JoesIdeas]

It looks like it's because you have the src attribute in the image element.

The src attribute is what tells the browser to load the image from the url in that field.

What lazy loading does is add the src attribute when the user scrolls down. So what you do is add the image url in the data-src attribute, which does not load the image by the browser, but is used by the lazy loading library to identify the image url and insert it into a src attribute when the user scrolls and the image is to be loaded.

In most cases you can just remove the src attribute. In your case it looks like it's loading a placeholder image, so make sure to do this on a backup theme first in case your theme is coded in a way that the placeholder helps to form the grid.

[bluewave]

the src attribute is actually fine to display a placeholder, you can overwrite the value with JS on the onload image event. Without a closer look at how that code is implemented, that is the best direction that I can provide.

[phpfaruk]

how can I fix it below screenshot.

missing lazy images

[JoesIdeas]

Hi @phpfaruk  I see you got it down to 7, here are the 7 remaining images: https://analyze.speedboostr.com/result/fvlmy3h423/rule/lazyLoadableImagesBelowTheFold

Here's how you can locate if there's a problem and solve:

1) Find where those images are loading in your theme (probably index.liquid, or if they're from a section in your Customize theme, look for a Section file with a name like the feature in the customize area.

2) If you identify them, lazy load them.

3) If they are not coming from your theme, then maybe they're coming from an app. In that case you'll have to contact the app developer to see if they can lazy load.

If all those turn up and it looks like they're being lazy loading, but still getting the warning, it could mean that your home page banner is loading with a delay, or does not have a set height. In that case, the images below it will actually load on page load because they get moved above the fold, but then analysis tools will think they are below the fold because of the screen height.

But looking at your page I can see this image for example doesn't have a lazy load class or data-src attribute applied, so it's not being lazy loaded. In that case, steps 1-3 above will help you solve that:

[phpfaruk]

Actually, I can't find these section where is located this file.

is there any way to add class and data-src with jquery function? like i will add class lazyload and replace src to data-src with jquery function? 

[JoesIdeas]

@phpfaruk another tactic you can use to find the code is to download your theme, then do a search for the ID / class that pertains to the image element or containing div.

What I usually do in that case is:

1) Open chrome dev tools and look for an ID.

2) Download the theme files and do a search locally.

3) Find the file where the code is.

4) Update in your theme.

I explain more about that here: https://speedboostr.com/finding-and-fixing-console-errors.

Your other idea, I personally wouldn't do that, because you have to wait for jquery library to load, then alter the element. I also try to never use jquery, it just adds extra weight and usually is not necessary.

[SolidandMarl]

Hi Joe,

I am trying to implement lazy loading to my store. I am NOT a coder by any means but recourses etc. dictate me doing it myself! eeekkk

Thus far it's going alright but I can't, for the life of me, find the "<img src=" for the banners I use for navigation on my home page. Any idea where these might be or should be located within my theme (Symmetry)?

Edit - The banners are added in the Online store > Navigation > Menus > Main Menu 

[solacetouch]

@JoesIdeas My client is doing 100% of their products through drop shipping through an app. The app supplies all the pictures and they are not optimized. Are you saying we won't be able to lazy load these since it's from an app? 

[JoesIdeas]

@solacetouch if you have access to the code that displays the images, then you can edit / optimize them. If the app injects them in your site externally / you do not have access to the code, then you'll have to contact the app for any requests.

[phpfaruk]

yes i have removed src . but as yet it is showing me missing 16 images lazy loading images . as you can see my screenshot.

my site is https://www.otteryjewellery.com.au . you can check shopify analyzer.