Preload Image

[kiranavaibe]

Hi @gerhardsletten ,

I have an EPUB with some images, and during page navigation, it takes a while to load and display the images, resulting in a white screen. Do you have any ideas on how to preload images to eliminate the loading time?

[gerhardsletten]

@kiranavaibe React-reader uses epubjs under the hood, and this will load the whole chapter into the dom, and as long as the img-tags not having loading=lazy the browser should start loading images for the current chapter.

In this screenshot i navigate to a new chapter, and in the network-tab 2 images are loaded. The last one will appear on 2 pages ahead.

[kiranavaibe]

@gerhardsletten Thanks for the response! Yes, I understand that images load on page navigation. However, likely due to the image size, there’s a brief white screen before the image appears. I’m wondering if there’s any technique to preload an image in advance to reduce that white screen time.

[gerhardsletten]

In this example it shows how to hook into the dom of the iframe where content is rendered: https://github.com/gerhardsletten/react-reader/blob/main/src/examples/DisableContextMenu.tsx

In the same way you could try to hook into each image and display a loader until all is loaded

https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded