Next.js Discord

Discord Forum

Image loading delayed

Unanswered
Yellowhead catfish posted this in #help-forum
Open in Discord
Yellowhead catfishOP
I have a website to show images of my dog lmao, I made some code so if you click it, itll show a new image with an animation, but the images load delayed, how can I pre load them all or add a loading animation or something? Idk if preload would be great, its 17 images, here is the code on my github: https://github.com/tookender/website/blob/main/src/pages/doggo.tsx

31 Replies

Yellowhead catfishOP
live website btw: https://korino.dev/doggo
Plott Hound
Try using the image component from next https://nextjs.org/docs/pages/building-your-application/optimizing/images
Wait I see you are using the older pages router let me get the correct link
@Plott Hound Try using the image component from next https://nextjs.org/docs/pages/building-your-application/optimizing/images
Yellowhead catfishOP
How can I modify the .src content of Image attribute?
Witeh JavaScript
Plott Hound
you probably shouldnt be doing that. in React you are not supposed to manipulate the DOM directly
Yellowhead catfishOP
i have to modify the src how else do i want to show a different image each time
@Yellowhead catfish i have to modify the src how else do i want to show a different image each time
Brown bear
Have the current picture saved in state (https://react.dev/reference/react/useState) i.e.
const [currentPicture, setCurrentPicture] = useState('https://picsum.photos/200/300')


And then use the state variable in the Next Image component src={currentPicture}

Use the setCurrentPicture(urlhere) to set the picture to be displayed
Yellowhead catfishOP
uhh ok
Brown bear
Looking at your github, I would suggest reading the React documentation (at that link above) to understand how stuff works with React
Brown bear
Use the "onClick" and other events to fire off functions rather than adding event listeners manually
You could even make your own "DoggoImage" component with props to pass in the src and description if you wanted to perhaps display more than one Doggo
Yellowhead catfishOP
i just wanna show one picture of my doggo
thatll just work? thats amazing if so
Brown bear
Thinking more of the understanding of how you use events in React versus normal js, for example: https://react.dev/learn/responding-to-events
instead of addEventListener
and the use of state
https://react-nipil4.stackblitz.io for example (I removed the animation stuff as that will take a bit more time to figure out). Yes, but it's missing your animation stuff
Yellowhead catfishOP
wow thats shorter
i see what you mean yeah
and the animation is kinda weird like it rotates two times now
@Yellowhead catfish and the animation is kinda weird like it rotates two times now
Yellowhead catfishOP
wait ik why this happens
@Brown bear Thinking more of the understanding of how you use events in React versus normal js, for example: https://react.dev/learn/responding-to-events
Yellowhead catfishOP
what am i doing wrong..
import { motion } from "framer-motion";
import { useState } from "react";
import { getRandomDog } from "@/utils/doggo";
import Head from "next/head";
import Image from "next/image";

export default function Home() {
  const initialData = getRandomDog(false);
  const [currentPicture, setCurrentPicture] = useState(initialData[0]);
  const [currentDescription, setCurrentDescription] = useState(initialData[1]);

  const changeDoggo = () => {
    const data = getRandomDog(false);
    setCurrentPicture(data[0]);
    setCurrentDescription(data[1]);
  };

  return (
    <main>
      <Head>
        <title>Doggo</title>
      </Head>

      <motion.div
        animate={{ opacity: 1, y: 0 }}
        initial={{ opacity: 0, y: -20 }}
        transition={{ ease: "easeIn", duration: 0.5, delay: 0.35 }}
      >
        <div className="flex flex-col items-center justify-center h-screen">
          <Image
            id="image"
            src={currentPicture}
            alt="Doggo Picture"
            width={500}
            height={500}
            className="max-w-[80vw] mt-36 sm:mt-0 hover:cursor-pointer duration-500 rounded-md mx-16 active:scale-95 hover:scale-[1.02]"
            onClick={changeDoggo}
          />

          <p className="text-center md:mt-8 font-semibold mt-2" id="description">
            {currentDescription} <br />
          </p>
        </div>
      </motion.div>
    </main>
  );
}
i mostly followed your example
Brown bear
Almost certain that is because you're pulling in a random dog in initialData, so when the server renders it, it gets a different src to the client.
You need to either choose the dog and pass it down in ServerSideProps, or perhaps have a loading picture/text and call getRandomDog on page load (in useEffect), so that the server rendered content matches the client. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props