动态显示图像时显示轻微延迟

Question

我有一个页面，当单击各种按钮时动态显示图像。 一切都完美。

但是，我希望每个新创建的图像出现在页面上时有轻微的延迟，也许还有非常轻微的不透明度过渡，以给人以更“自然”的方式加载图像的印象，而不是让整个图像页面出现不和谐的跳转。

问题是，这会在重复循环中去哪里？由于我无法添加延迟或过渡到 DOM 中不存在的内容，因此如何使用动态图像来实现此功能？最好的方法是 settimeout() 函数还是 CSS 转换，或者两者兼而有之？

寻找指点，甚至可能是在线教程。

 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
  }

Answer 1

您可以使用 CSS 过渡：

img { /* or maybe images with some class, if you don't want all images to do this*/
  opacity: 0;
}

.faded-in {
  opacity: 1;
  transition: 0.25s all ease-in-out;
}

当图像加载完成时，您可以在 JavaScript 中添加切换

faded-in

类：

const displayArea = document.querySelector("#displayArea");
for (let i = startIndex; i < finishLength; i++) {
  const displayPic = document.createElement("IMG");
  // add id's, class, alt, src, insert into div, etc
  displayPic.addEventListener("load", fadeIn);
  displayArea.appendChild(displayPic);
}

function fadeIn(event) {
  event.target.classList.toggle("faded-in");
}

调整过渡时间，使其感觉快速但不刺耳。

看这个

const displayArea = document.querySelector("#displayArea");
for (let i = 0; i < 5; i++) {
  const displayPic = document.createElement("IMG");
  displayPic.src = "https://picsum.photos/200";
  displayPic.alt = "";
  displayPic.addEventListener("load", fadeIn);
  displayArea.appendChild(displayPic);
}

function fadeIn(event) {
  event.target.classList.toggle("faded-in");
}

img {
  opacity: 0;
}

.faded-in {
  opacity: 1;
  transition: 0.25s all ease-in-out;
}

<div id="displayArea">
</div>