added banners preloader

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import Home from './components/Home';
@@ -7,6 +7,7 @@ import Thread from './components/Thread';
 import Catalog from './components/Catalog';
 import { createGlobalStyle } from 'styled-components';
 import 'react-tooltip/dist/react-tooltip.css';
+import preloadImages from './utils/preloadImages';
 
 export const BoardContext = React.createContext();
 
@@ -40,6 +41,14 @@ export default function App() {
   const [selectedThread, setSelectedThread] = useState('');
   const [selectedStyle, setSelectedStyle] = useState('Yotsuba');
 
+
+  const imageUrls = Array.from({ length: 14 }, (_, index) => `/assets/banners/banner-${index + 1}.jpg`);
+
+  useEffect(() => {
+    preloadImages([...imageUrls]);
+  }, []);
+
+
   return (
   <div>
     <Helmet>

src/components/ImageBanner.jsx

@@ -14,7 +14,7 @@ const ImageBanner = () => {
   useEffect(() => {
     setIsLoaded(false);
     const img = new Image();
-    img.src = `/assets/banners/banner-${currentImage}.jpg?${Date.now()}`;
+    img.src = `/assets/banners/banner-${currentImage}.jpg`;
     img.onload = () => {
       setIsLoaded(true);
     };
@@ -22,9 +22,9 @@ const ImageBanner = () => {
 
   return (
     <>
-      {isLoaded && <img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg?${Date.now()}`} alt="banner" />}
+      {isLoaded && <img id="banner-img" src={`/assets/banners/banner-${currentImage}.jpg`} alt="banner" />}
     </>
   );
 };
 
-export default ImageBanner;
+export default ImageBanner;

src/utils/preloadImages.js

@@ -0,0 +1,8 @@
+const preloadImages = (imageUrls) => {
+  imageUrls.forEach((imageUrl) => {
+    const img = new Image();
+    img.src = imageUrl;
+  });
+};
+
+export default preloadImages;