Hi @industrialtex,
There are multiple reasons why product images are not being shown. My colleague highlighted what could be the possible reasons on this thread:
https://ww.wp.xz.cn/support/topic/images-will-not-load-on-woocommerce-product-page-2/#post-15141621
I’ve also seen CSS conflicts causing this but not having any reference since your Google Drive file is private doesn’t help me much here.
Could you please share a link to one of your products where we can reproduce what you’re saying?
Also, please share a copy of your site’s System Status. You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support”. Once you’ve done that, paste it here in your response.
We’ll be happy to help further.
Cheers.
Hello,
Here is a screengrab as to what the issue is – https://d.pr/v/0mgYD3
Default Storefront theme.
Only WooCommerce & Litespeed Cache plugin on.
Only the Litespeed cache setting for Javascript to be delayed is on.
The images are visible only after there is an activity from the mouse/scrolling in the case of the mobile device.
I intend to keep the Javascript to be delayed in the Litespeed cache plugin and would want to know which Javascript/jQuery string to exclude from optimization so that the images are loaded without user interaction.
Hello,
Thanks for sending this short video, a common reason is a plugin/theme conflict, to check the issue, please perform these steps:
- Clear the site cache
- Temporarily switch your theme to Storefront
- Disable all plugins except for WooCommerce
- Repeat the action that is causing the problem
If the issue is not present after running these actions it means there was a conflict, and you can reactivate the plugins one by one until the cause behind the problem is found You can find a more detailed explanation on how to do a conflict test here.
Let us know how it goes.
Hello,
Appreciate your reply. However, it is known to have caused from a particular litespeed setting which makes JavaScripts to be delayed until user interaction. However, if I keep these settings the the user when land from a mobile device is on single product page is greeted with blank screen untill she scrolls.
I was looking for the specific JavaScript or JQuery file that’s responsible for product images to be visible so that it could be excluded from the optimization. Doing this will load the page correct and at the same time improves the loading speed.
I hope I it more clearly as to what I am looking for as a solution. Thanks.
Hi @industrialtex
The product’s images on single product pages are associated with JavaScript events – responsible for the zooming and for the lightbox features. That’s possibly the reason why the image is not being loaded prior to running JavaScript.
You might want to disable caching for single products pages, at least until you find a final solution:
That said, please note that this forum is specific for the WooCommerce core plugin. Since you’re integrating your store with the LiteSpeed plugin, the issue would be best handled in the LiteSpeed plugin support forum:
https://ww.wp.xz.cn/support/plugin/litespeed-cache/
Feel free to share a link to this thread there, so the information will be available to the support staff.
* https://ww.wp.xz.cn/support/forum-user-guide/faq/#where-should-i-put-my-post`
@hegenberg
Appreciate your reply. Will take it up with the LiteSpeed cache team to resolve this. Thanks.
Sounds good. Feel free to open a new topic if you need additional help from us.
Best,
