Guys, how do I delay the loading of the image?

Because he is loading the image, and then he is applying the script of the particles and there is not something fluid, because of him the image appears and then the image is transformed into particles

import Script from "next/script";
import ATLogo from "../../../public/images/ATLOGOWHITE1.png"
import Image from "next/image";

function HeroParticles() {
  return (
    <>
      <Script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle-documentation.js"/>
      <Script src="https://nextparticle.nextco.de/nextparticle.min.js"/>
      <Script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle-interaction.js"/>
      <Script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/23500/nextparticle-documentation.css"/>

      <Image
        id="logo"
        className="next-particle"
        loading="lazy"
        src={ATLogo}
        alt="ATLOGO"
        data-init-position="random"
        data-init-direction="random"
        data-fade-position="random"
        data-fade-direction="random"
      />
    </>
  );
}

export default HeroParticles;