0

I got website written in HTML, containing a list/table of something like 2000 rows (will only grow larger), every one is a summary, when opened, it shows a gif file (mostly something like 2MB).

Off course loading this website takes lots and lots of time. Was hoping that by the load="lazy" it would only load when opening the summary, but this seems not the case.

So, question is, is there a way to realize this? To really only load the picture when summary/details is opened?

Optional extra question (not priority): can loaded image also be disposed after closing the summary/details again?

Here's the code of 1 typical row: 

<details>
  <summary>
    <table>
      <td width="68">#910</td>
      <td width=542>PictureName</td>
      <td width=168>DateOfUploading</td>
    </table>
  </summary>
  <table>
    <td width=68></td>
    <td width=542><iframe src="../example.gif" loading="lazy" width="542" height="280"></iframe></td>
    <td width=168></td>
  </table>
</details>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Stefanovici
  • 51
  • 5
  • You are using ` – vee Jan 08 '22 at 17:15
  • [This](https://web.dev/browser-level-image-lazy-loading/) is recommended article for lazy loading. They are mentioned about library that is look like easy to use. – vee Jan 09 '22 at 14:10
  • Thanks. Seems like thing I asked for can't be done this way, since the lazy loading method still loads all the pictures above the visible window. So have to find something else then. Consider the question solved. – Stefanovici Jan 09 '22 at 23:47
  • 1
    Yes, I tested by put image with lazy loading into completely hidden element (`display`, `visibility`, `opacity`, `height`, `width`). It still loaded if it is in the view port area. – vee Jan 10 '22 at 13:05

0 Answers0