unable to lazy load

I located the problem. On the mobile site, your image tags don’t self-close.

You have:

<img width="268" height="268" src="https://m.cardmart.in/wp-content/uploads/2015/11/Cardmart-116-Inside-268x268.jpg" class="attachment-shop_catalog wp-post-image" alt="Cardmart-090">

You need:

<img width="268" height="268" src="https://m.cardmart.in/wp-content/uploads/2015/11/Cardmart-116-Inside-268x268.jpg" class="attachment-shop_catalog wp-post-image" alt="Cardmart-090" />

Add the “/” at the end, and it should work.

Hey ,
These are woocommerce images , I just upload them and set the product image.
On main site i cant see any end tag , but its still working.
Can you tell me how can i achieve it for woocommerce?
Note: It is working for single-product-images
Thanks

This may be difficult to answer, as the problem could be with your theme or with one of your plugins. How do you add images to that section in wp-admin? Are you using a shortcode? Or does it use custom fields? What theme are you using?

->I have tried disabling other plugins
->Using theme virtue (Kadence Themes), same as on my main website.
->Just normal upload of images (woocommerce add products > set product image> upload image)
->No shortcodes , custom fields.

It looks like an issue with the Kadence theme. I checked out their demo site and the theme there had similar code. The images in that carousel don’t self-close, and they need to in order for the plugin to detect them. If you’re comfortable editing your theme files, you can make that change yourself. If not, I’d recommend contacting the theme authors and requesting that update the theme to fix this.

Refer them to this thread, and let them know to reach out to me if they have any questions.

I’m going to mark this as resolved for now. Feel free to reopen it if anything new comes up on this issue.

Hey,
I find this odd since html markup shouldn’t have a closing slash..

https://www.w3schools.com/tags/tag_img.asp
https://stackoverflow.com/questions/7366344/do-we-still-need-end-slashes-in-html5

and you can see here on the wootheme it’s the same https://demo2.woothemes.com/storefront/product-category/kitchen/

Maybe the issue is not with the closing slash?

Kadence Themes

TL;DR: Yes, it’s permissible to omit closing / on an image tag, but my plugin (and others) won’t recognize it.

It’s true that HTML5 doesn’t need to have a trailing slash on an image tag. However, due to the complexities of parsing HTML in PHP, I’ve made the decision that this plugin will require valid XHTML in order to find objects to be lazy-loaded. This plugin uses regex to locate HTML tags and replace src with data-src. Correctly identifying when a tag opens and closes in PHP becomes incredibly complicated for a myriad of reasons when you don’t have well-formed XML (which is permissible in HTML5).

I have made the decision that it is safer to miss a few tags which aren’t XHTML-compliant rather than risk incorrectly matching additional HTML content. (Missing an img is better than finding an img that’s not really an img). This is one of the arguments for continuing to adhere to XHTML despite the relaxed stance taken in HTML5. I’m not really invested in that argument one way or the other, but for the purposes of this plugin, HTML needs to be in that format.

Feel free to make that call for yourself. There’s no real downside (aside from the time it takes to fix it) of making your markup XHTML compliant, and the upside is that this plugin, and other similar plugins will work with it.

how can I add this to the end of all img tags?

is there any recommended filter?