React/Typescript - Build a preloader which caches an array of images and outputs progress
Budget: £20 – £250 GBP
I have a react/typescript project that I am working on however, I need a preloader creating using hooks. The preloader needs to be a component which runs at the start of the project, the purpose of this preloader is to create the images within the cache before the project loads so that the experience is smooth as I have over a 1000 images to preload. Here is an example of how it could be done but it would need changing from this code https://jack72828383883.medium.com/how-to-preload-images-into-cache-in-react-js-ff1642708240 and https://stackoverflow.com/questions/46632327/iterate-through-an-array-in-blocks-of-50-items-at-a-time-in-node-js
Below are the requirements:
- Must be built using React 18 and Typescript
- Preloader must use hooks like useEffect()
- Images will be passed to the preloader via an array.
- There will be around 1000 images total in the array.
- I want to do the image preloading in batches of 50 to ease the hit taken on the network.
- The entire preloader must output the progress of how many images are preloaded out of 100% to the screen as number.
- It is important that the preloader does the first 50 waits for them and then continues on after until the entire array has been covered.
- Once all the assets are preloaded the preloader should hide.
Below are the requirements:
- Must be built using React 18 and Typescript
- Preloader must use hooks like useEffect()
- Images will be passed to the preloader via an array.
- There will be around 1000 images total in the array.
- I want to do the image preloading in batches of 50 to ease the hit taken on the network.
- The entire preloader must output the progress of how many images are preloaded out of 100% to the screen as number.
- It is important that the preloader does the first 50 waits for them and then continues on after until the entire array has been covered.
- Once all the assets are preloaded the preloader should hide.