I have a page that dynamically displays images when various buttons are clicked. All works perfectly.

However, I would like to have each newly created image appear on the page with a slight delay, maybe also a very slight opacity transition, to give the impression of images being loaded in a more “natural” way, rather than have the whole page appear in a jarring jump.

The question is, where in the repeat loop would this go? How do I implement this with dynamic images as I can’t add a delay or transition to something that doesn’t exist in the DOM? Is the best method a settimeout() function or CSS transition or both?

Looking for pointers, maybe even an online tutorial.

 for (let i = startIndex; i < finishLength; i++) {
    const picDiv = document.createElement("DIV");
    const displayPic = document.createElement("IMG");
    /// add id's, class, alt, src, insert into div, etc
    document.getElementById("displayArea").appendChild(picDiv);
    // Do something here, or elsewhere, to make each image/div appear with a slight delay
  }