Блог

Я видел много способов предварительной загрузки изображений в react и добился успеха с несколькими различными решениями.. но у меня небольшая проблема с переключением изображений этого компонента.

В папке my / public хранится массив из 19 изображений, которые должны переключаться через 500 мс. Для этого я предварительно загружаю все 19 изображений, прежде setTimeout чем функция начнет их переключать.

Я начал с предварительной загрузки их в /public/index.html файл вроде такой … но на самом деле это не сработало.

 <link rel="preload" href="%PUBLIC_URL%/Img1.jpg" as="image" />
 

Тогда я решил попробовать другой метод, создав promises и загрузив их в кэш перед запуском setTimeout функции. Это в приведенном ниже коде.

Проблема в том, что … оба метода дают одинаковый эффект. Иногда изображение переключается со скоростью 500 мс, иногда около 2 секунд.

Вот демонстрационная ссылка, чтобы увидеть неожиданную задержку. http://lonewolf6-6009ac63d7e5da3a35dc08e4.c.6004d6b8d7e5da3a35dc04c8.cycle.io/about

Спасибо за совет!

 import React, { useEffect, useState } from "react";
// import LW_ABOUTME from './LW_ABOUTME.png';

export default function About() {
  const [aboutImg, setAboutImg] = useState("Img1");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const images = [
      "/images/about-images/Img1.jpg",
      "/images/about-images/Img2.jpg",
      "/images/about-images/Img3.jpg",
      "/images/about-images/Img4.jpg",
      "/images/about-images/Img5.jpg",
      "/images/about-images/Img6.jpg",
      "/images/about-images/Img7.jpg",
      "/images/about-images/Img8.jpg",
      "/images/about-images/Img9.jpg",
      "/images/about-images/Img10.jpg",
      "/images/about-images/Img11.jpg",
      "/images/about-images/Img12.jpg",
      "/images/about-images/Img13.jpg",
      "/images/about-images/Img14.jpg",
      "/images/about-images/Img15.jpg",
      "/images/about-images/Img16.jpg",
      "/images/about-images/Img17.jpg",
      "/images/about-images/Img18.jpg",
      "/images/about-images/Img19.jpg",
    ];
    let imgNum = 0;

    const cacheImages = async (srcArray) => {
      const promises = await srcArray.map((src) => {
        return new Promise(function (resolve, reject) {
          const img = new Image();

          img.src = src;
          img.onload = resolve();
          img.onerror = reject();
        });
      });

      await Promise.all(promises);
      setIsLoading(false);
    };

    const changeImage = () => {
      setAboutImg(images[imgNum]);
      imgNum <= 17 ? imgNum   : (imgNum = 0);
      setTimeout(() => {
        changeImage();
      }, 500);
    };
    cacheImages(images);
    !isLoading amp;amp; changeImage();
  }, [isLoading]);

  return (
    <div id="page-content" className="about-div">
      <div className="about-img-div">
        {isLoading ? (
          <img src="/images/about-images/Img1.jpg" alt="first" className="about-img" />
        ) : (
          <img src={`${aboutImg}`} alt={aboutImg} className="about-img" />
        )}
      </div>
      <div className="about-text-div">
        <p className="about-text">
          Zachary Matias aka Lonewolf is a director and editor from the midwest.
          In 2016 he sold his car and purchased a video camera where he would
          shoot his very first music videos for friends and artists around the
          area. After reaching out to Chicago artists, he then started branching
          out and developing his own unique editing style.
        </p>
        <p className="about-text">
          Since then, he has had the pleasure of not only collaborating with but
          befriending some of his favorite artists and creatives and continues
          to do so.
        </p>
      </div>
    </div>
  );
}