加载动画直到实际显示图像

Question

请查看我创建的应用程序https://codepen.io/flowbartek93/pen/pobQvwQ 。

如您所见，这是关于按时将猫与其影子克隆匹配。 但有一件事我不能做。

我想要这样的东西：单击“添加猫”后，显示加载微调器，当图像最终加载时，微调器消失。

但是我不知道这次等待显示的图像实际上是什么。 所以不知道怎么查。 我已经知道它不是整个 DIV 元素或 http 200 响应。 那么它是什么呢？

这是两个主要的函数，负责获取和显示猫的图像以及加载动画。 动画必须从 Java Script 动态运行，因为当在 html 中硬编码并使用 display 属性时，我发现很难完成我想要的，但也许我错了。 请检查我的代码笔以获得更大的图片。

  function downloadCat() { // 

    const catsUrl = "https://api.thecatapi.com/v1/images/search";
    fetch(catsUrl).then(response => {
            return response.json();
        })
        .then(json => displayCat(json[0].url))

}


function displayCat(imgUrl) {
  
    const newCat = document.createElement("div");
    newCat.setAttribute("class", "cat draggable")

    /* Loading */
    const loading = document.createElement('div')

    loading.setAttribute("class", "lds-ring")

    newCat.appendChild(loading);
    for (let i = 0; i < 4; i++) {
        const emptyDiv = document.createElement('div');
        loading.appendChild(emptyDiv);
    }

    /* Loading */

    newCat.setAttribute("id", idCounter++);
    newCat.style.backgroundImage = "url(" + imgUrl + ")";
    catBoard.appendChild(newCat);

}

Answer 1

使用image.onload事件，当图像加载完成时，将在图像元素上调用此事件处理程序。

function downloadCat() {
  const catsUrl = "https://api.thecatapi.com/v1/images/search";
  fetch(catsUrl).then(response => {
      return response.json();
    })
    .then(json => displayCat(json[0].url))
}


function displayCat(imgUrl) {

  const newCat = document.createElement("div");
  newCat.setAttribute("class", "cat draggable")

  /* Loading */
  const loading = document.createElement('div')

  loading.setAttribute("class", "lds-ring")

  newCat.appendChild(loading);
  for (let i = 0; i < 4; i++) {
    const emptyDiv = document.createElement('div');
    loading.appendChild(emptyDiv);
  }

  /* Loading */

  newCat.setAttribute("id", idCounter++);
  //Diplay spinner here
  let img = new Image();
  img.onload = function() {
    newCat.style.backgroundImage = "url(" + imgUrl + ")";
  };
  img.src = imgUrl;
  catBoard.appendChild(newCat);

}