Images loading issue on ajax request in Empire theme

Technical Q&A

Topic summary

A developer is experiencing image loading failures when using jQuery Ajax to fetch and append product HTML in Shopify’s Empire theme. The issue stems from the theme’s lazyload functionality, which prevents dynamically loaded images from rendering properly.

Current Status:

  • Images load correctly when lazyloading is disabled
  • Images fail to load when using Empire theme’s standard image rendering with Ajax requests
  • Screenshots demonstrate the before/after behavior of the issue

Proposed Solution:
One responder suggested using a “section copy method” instead of replacing individual elements—fetching entire content sections to ensure proper image loading within the theme’s framework.

Outcome:
The discussion remains unresolved. The original poster requested implementation guidance for the suggested approach, but no detailed solution has been provided. Another user has since reported encountering the identical issue, indicating this may be a broader problem with the Empire theme’s Ajax compatibility.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello guys, hope you all are doing well.

I’m facing an issue with the Empire theme’s latest version. I have created a custom colour option as an individual product and fetched that product on click by jQuery Ajax. But when I make an Ajax request and append fetched product HTML to the page, everything works fine except images. Images are not loading due to the lazyload of the Empire theme.

I’ve tried it without lazyloading in images, and then images are loading but when I use the Empire theme image rendering way, the images are not loading on Ajax’s request.

Please help me to solve this issue.

Please check that screenshot for more clarification:

Screenshot before click

Screenshot after click

2

To address the issue with images not loading on Ajax requests due to the Empire theme’s lazyloading functionality, we recommend considering an alternative approach. Instead of replacing individual elements via Ajax, we suggest utilizing a section copy method. This involves fetching and rendering entire sections of content, including images, ensuring they load correctly within the theme.

1 Like
3

Hello @MiracleWebsoft

Thank you for your reply.

Can you please guide me on how I can do that?

4

Sadly @MiracleWebsoft sounded like a classic ChatGPT answer. @Developer_Jay , did you manage to find a solution? I’m facing that same issue.