0

I'm looking for some guidance on how I can implement a loading screen in react. I have a page with pictures, since the pictures are raw photographs, they take a little bit to load on-page. So I'm looking to have a loading animation to run until the last photo is loaded and show the components. I found a few libraries but I'm fairly new and struggling to get only the animation to appear and have it disappear once the images have been loaded. Would someone be able to help guide me?

import { Container, CardColumns} from "react-bootstrap";
import PictureCards from "./PictureCards";
import React, { useState } from "react";
import "./Photography.css";
import "bootstrap/dist/css/bootstrap.min.css";
import img1 from "../../Assets/Photography/img1.jpg";
import img7 from "../../Assets/Photography/img7.jpg";
import img8 from "../../Assets/Photography/img8.jpg";

function Photography() {
  return (
    <section id="buffer" style={{paddingTop:"80px" }}>
      <Container>
      <h1 className="project-heading">
            Photography <strong className="purple">Gallery </strong>
          </h1>
          <p style={{ color: "white", paddingTop:"20px" }}>
            Here is a compilation of pictures:.</p>            
          <p align="left" style={{ color: "white", paddingBottom:"50px", paddingTop:"20px" }}>
            <strong>Shot on Nikon</strong>
          </p>
        <CardColumns>
          <PictureCards
            imgPath={img7}
            text=""
          />
          <PictureCards
            imgPath={img8}
            text=""
          />
          <PictureCards
            imgPath={img1}
            text=""
          />
        </CardColumns>
      </Container>
    </section>
  );
}
export default Photography;
Infinikev
  • 1
  • 2
  • https://arunmichaeldsouza.com/blog/loading-images-gracefully-with-react-image-appear – Rahul Feb 11 '21 at 07:33
  • Is it possible to have the entire gallery appear (so i guess either the section or container) once all pictures are loaded? and have a loading animation in the meantime? – Infinikev Feb 11 '21 at 08:00
  • you can try https://stackoverflow.com/questions/280049/how-to-create-a-javascript-callback-for-knowing-when-an-image-is-loaded – Rahul Feb 11 '21 at 08:58

0 Answers0