如何用JavaScript实现API加载前显示加载动画并优化弹窗体验

问题出在你拿到图片URL后立刻显示弹窗，但图片本身还没加载完成。要解决这个问题，我们需要监听图片的load事件，等图片完全加载完毕后再关闭加载动画并展示弹窗，同时还要处理图片加载失败的情况，避免加载动画一直显示。

修改要点： #

• 先给图片绑定load和error事件，再设置src属性（避免缓存图片触发事件不及时）
• 在load事件回调中执行关闭加载动画、显示弹窗的操作
• 在error事件回调中处理加载失败的情况，比如提示用户并关闭加载动画
• 修正CSS中object-fit: conver的拼写错误为object-fit: cover

修改后的完整代码： #

JavaScript

let btn = document.querySelector('.btn');
let popup = document.querySelector('.popup');
let wrap = document.querySelector('.wrap');
let photo = document.querySelector('.photo');
let svg = document.querySelector('svg');

btn.addEventListener('click', function(e) {
  svg.style.display = "block"

  axios.get("https://dog.ceo/api/breeds/image/random")
    .then((response) => {
      let Data = response.data.message;
      // 绑定图片加载完成事件
      photo.onload = function() {
        svg.style.display = "none";
        popup.style.display = "flex";
        // 解绑事件防止重复触发
        photo.onload = null;
        photo.onerror = null;
      };
      // 绑定图片加载失败事件
      photo.onerror = function() {
        svg.style.display = "none";
        alert('图片加载失败，请重试');
        photo.onload = null;
        photo.onerror = null;
      };
      // 最后设置图片地址
      photo.src = Data;
    })
    .catch((error) => {
      console.log(error);
      svg.style.display = "none";
      alert('请求失败，请重试');
    });

});

wrap.addEventListener('click', function(e) {
  e.stopPropagation();
});

popup.addEventListener('click', function() {
  popup.style.display = "none";
});

CSS

.popup {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.popup .wrap {
  width: 300px;
  background-color: #fff;
  text-align: center;
  border-radius: 20px;
  padding: 20px;
}

.popup .wrap .photo {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 修正拼写错误 */
  border-radius: 20px;
}

svg {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

svg .load {
  stroke-dasharray: 0 500;
  animation: rot 1s linear infinite;
}

@keyframes rot {
  100% {
    stroke-dasharray: 500 500;
  }
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.2/axios.min.js"></script>
<button class='btn'>open data</button>

<div class="popup">
  <div class="wrap">
    <h1>Pet</h1>
    <img class="photo" src="" alt="宠物图片">
  </div>
</div>

<svg width="240px" height="240px" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle cx="110" cy="110" r="90" stroke-width="10" stroke="gainsboro" fill="none"></circle>
        <circle cx="110" cy="110" r="90" stroke-width="10" stroke="darkturquoise" fill="none" class="load"></circle>
    </svg>

说明： #

• 通过photo.onload确保只有当图片完全加载到浏览器后，才会关闭加载动画并显示弹窗，避免用户看到弹窗尺寸跳动的情况
• photo.onerror处理图片加载失败的场景，防止加载动画一直挂着
• 事件触发后解绑onload和onerror，避免后续重复点击按钮时出现事件重复绑定的问题
• 修正了CSS中object-fit的拼写错误，保证图片显示正常

内容的提问来源于stack exchange，提问作者WEI A