KPC
Kevin Powell - Community•6d ago
Jenny P

Can a popover content be lazy-loaded?

I have a very large image that I want to show in a popover (or a JS modal/dialog), but I want the loading of the image to be delayed until the user clicks on the button so it does not affect load time. But because my image is above the fold, it's loading it immediately even though it's obviously not visible. Any thoughts?
1 Reply
Jenny P
Jenny POP•6d ago
Example code 
<button class="trigger" popovertarget="img-popover">Open image</button>

<div id="img-popover" popover>
  <img src="images/test-large.png" loading="lazy">
</div>
<button class="trigger" popovertarget="img-popover">Open image</button>

<div id="img-popover" popover>
  <img src="images/test-large.png" loading="lazy">
</div>
... okay, I might have answered my own question. I swear my image was loading (in the network panel) before, but now it's definitely not loading until I click the button.

Did you find this page helpful?