Lazy loading large manifests

[adamjarling]

Notes

Lazy loading of thumbnail resources. We have the data in the manifest, but this is about downloading thumbnail images and rendering to the screen. If we can try to handle this in a browser-native way (instead of 3rd party lib/package), that's preferred.

1,000 page manifest example: https://damsssl.llgc.org.uk/iiif/2.0/4642022/manifest.json

Done looks like

• Thumbnails are lazy loaded in an optimized way
• Minimal browser lag
• bool prop (default true) turning lazy loading on/off

[glenrobson]

Uses Intersection Observer if this isn't supported by the browser then it just loads everything.

Stephen: "Maybe worth checking if we already have a thumbnail too? To avoid double requests as you scroll back"

[glenrobson]

Possible to extend the size of the screen so that it can load images just off screen. This could be a config option.

[glenrobson]

It looks like there are few issues with the loading lazy:

http://localhost:4000/examples/thumbnail_panel/mixed_behaviour/v3/README.html

[glenrobson]

Hi Mat,

It looks like you fixed it. Is that correct? For info here is a larger manifest for testing and it seems to work OK:

https://thumbnail-panel.netlify.app/?iiif-content=https://damsssl.llgc.org.uk/iiif/2.0/4643220/manifest.json

Note if you slowly scroll the thumbnails they will appear as you scroll. If you scroll quickly to the bottom it appears as if all of the thumbnails load in order rather than jumping to the ones you are looking at. Is that expected?

[mathewjordan]

@glenrobson Yeah, it was a little bug and should be fixed now. It should be expected to behave how you described it. We could potentially put some sort of throttle on isInView functionality for a certain number of ms. Right now any amount of time should trigger a load for the thumbnail.