I've got a webpage that loads about 1500 small square images -- approx 12 images per row, full width of the window. The rows extend beyond the screen vertically such that the overall presentation requires vertical scrolling down & up.
I'm aware this many images is pushing the limits of browser memory, but nonetheless tryting to handle the problems this creates.
At first, as the users scrolls up and down all the images are visible -- everything loads fine.
Problems take about 20 seconds to manifest:
-
Scrolling up and down reveals a number of images out of viewport are empty -- as if they have been de-cached. They reload automatically (i.e. browser behavior nothing to do with any coding in the web page).
-
Zooming in reveals the images at a lower resolution, but which quickly refresh to full resolution, again automatically.
-
Zooming out reveals images outside of viewport have emptied. Sometimes they reload, sometimes they don't.
-
Over time increasing numbers of "unloaded" images fail to recover, so that the presentation increasingly falls apart as the user continues to scroll and zoom.
I've been testing lazy loading (which doesn't seem to in implement on this page) and jQuery appear/disappear (which so far don't seem to be getting detected)
Question: Is it possible to detect images that are 'unloaded' by the browser as a result of scrolling and zooming?