Изображения на сайте загружаются медленно. Они загружаются после загрузки страниц ⇐ Javascript

[Anonymous]

Пожалуйста, кто -нибудь должен помочь мне на этом веб -сайте, изображения загружаются медленно, они загружаются после того, как страница была загружена. Изображения перехода HOMPage показывают пустые после загрузки страницы, а затем показывают изображение и короткое пустое пространство. Также страницы на веб -шоу запускаются при первой навигации на каждую страницу. Я уменьшил размеры изображений до 300 КБ, а также изменил формат на Webp, чтобы они загружались быстрее. Если я могу просто заставить изображения загружаться после загрузки страниц или способ, чтобы изображения загружались быстрее при загрузке страниц. < /P>
Это домашняя страница < /p>
import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import Styles from "./Home.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGooglePlay, faApple } from "@fortawesome/free-brands-svg-icons";

const images = ["/carousel1.webp", "/carousel2.webp", "/carousel3.webp"];

const BASE_URL = process.env.REACT_APP_BASE_URL;

function Home() {
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) =>
prevIndex === images.length - 1 ? 0 : prevIndex + 1
);
}, 7000);

return () => clearInterval(interval);
}, []);

useEffect(() => {
images.forEach((src) => {
const img = new Image();
img.src = src;
});
}, []);

return (


PushEat - No Stress, Just Great Food!



{/* Open Graph */}






{/* Twitter card */}






{images.map((src, index) => (

alt="services"
loading="eager"
width="5760"
height="1712"
/>






{title}


{lastUpdated && (

Last Updated: {lastUpdated}

)}



{children}

);
}

export default ContentService;
< /code>
Это стиль для изображения каждой страницы < /p>
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

.service_wrapper {
position: relative;
width: 100%;
overflow: hidden;
background-color: black;
}

.services {
position: relative;
width: 100vw;
height: auto; /* set a fixed height or based on aspect ratio */
}

.imagePlaceholder {
width: 100vw;
height: calc(100vw / 3.36); /* aspect ratio */
background-image: url('../assets/frame-blur.webp');
background-size: cover;
background-position: center;
background-color: #222; /* fallback color similar to blur */
filter: blur(10px);
transition: opacity 0.3s ease;
position: relative;
z-index: 1;
}

.services img {
width: 100vw;
height: auto;
object-fit: cover;
display: block;
}

.navbar {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top:20px;
padding-bottom:20px;
z-index: 10;
}

.service_content {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20; /* Increase z-index */
padding-bottom: 60px;
color: white;
max-width: 90%;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
box-sizing: border-box;
margin-bottom: 0;
margin-top: 0;
align-items: center;
text-align: center;

}

.content {
margin-top: 160px;
}

.content .last_update {
font-weight: 800;
font-size: 80px;
line-height: 120%;
letter-spacing: 4%;
text-align: center;
vertical-align: middle;
margin-top: 0;
margin-bottom: 0;
}

.content p {
font-size: 18px;
line-height: 18px;
letter-spacing: 0%;
text-align: center;
margin-top: 0;
}

.content span {
font-style: italic;
font-weight: 200;
}

.smallTitle {
font-size: 1.4rem; /* or smaller */
line-height: 1.2;
}

@media (max-width: 1130px) {
/* .content {
margin-top: 210px;
} */

.content .last_update {
font-size: 30px;
}

.content p {
font-size: 13px;
}
}

@media (min-width: 1001px) and (max-width: 1054px) {

.content .last_update {
font-size: 27px;
}

.content p {
font-size: 16px;
}
}

@media (max-width: 1048px) {
.content {
margin-top: 200px;
}

.content .last_update {
font-size: 27px;
margin-bottom: 3px;
}

.content p {
font-size: 16px;
margin-bottom: 13px;
}
}

@media (min-width: 1001px) and (max-width: 1130px) {
.content .smallTitle,
.content .last_update {
font-size: 1.4rem !important;
line-height: 1.2 !important;
margin-bottom: 5px !important;
}
}

@media (min-width: 1001px) and (max-width: 1048px) {
.content .smallTitle,
.content .last_update {
font-size: 2rem !important;
line-height: 1.3 !important;
}
.content {
margin-top: 150px;
}
}

@media (min-width: 1049px) and (max-width: 1130px) {
.content .smallTitle,
.content .last_update {
font-size: 2.5rem !important;
line-height: 1.2 !important;
}
}

@media (min-width: 1131px) and (max-width: 1378px) {
.content .smallTitle,
.content .last_update {
font-size: 3.3rem !important;
line-height: 1.2 !important;
}
}

@media (max-width: 1000px) {
.services img {
width: 100vw;
height: 500px;
object-fit: cover;
display: block;
}

.content .last_update {
font-size: 50px;
margin-bottom: 10px;
}

.content p {
font-size: 16px;
}
}

@media (max-width: 768px) {
.content .last_update {
font-size: 60px;
}

.content {
margin-top: 100px;
}
.last_update {
display: block;
white-space: pre-line;
line-height: 1.2;
}

.content p {
font-size: 14px;
margin-top: 20px;;
}
}

@media (max-width: 480px) {
/* .content .last_update {
font-size: 30px;
} */

.content p {
font-size: 12px;
}
}
< /code>
Это index.js < /p>












PushEat




















You need to enable JavaScript to run this app.





Подробнее здесь: https://stackoverflow.com/questions/796 ... een-loaded