图片轮播动画优化：使用 animationend 事件与 Promise 预加载

本文旨在解决图片轮播过程中，如何通过 CSS 类控制淡入动画，并在动画结束后移除该类，以避免动画重复触发的问题。通过监听 animationend 事件，并在事件触发时移除或替换 CSS 类，可以实现更精细的动画控制。同时，利用 Promise 预加载图片，可以避免图片加载延迟导致的动画效果不佳。

实现图片轮播的淡入淡出效果

在实现图片轮播时，为了提升用户体验，常常会添加淡入淡出动画。一种常见的做法是通过 JavaScript 添加和移除 CSS 类来实现。然而，简单地在 setTimeout 中移除类可能导致动画未完成就被移除，或者动画重复触发。

使用 animationend 事件

animationend 事件在 CSS 动画完成后触发。我们可以监听这个事件，并在事件处理函数中移除或替换相应的 CSS 类。

以下是一个示例：

const changingImage = document.querySelector('#changing-image');
changingImage.onanimationend = () => {
changingImage.classList.replace('fade-in', 'opa1');
};

在这个例子中，当 fade-in 动画结束后，fade-in 类会被 opa1 类替换。这里的 opa1 类可以简单地设置 opacity: 1;，确保图片完全显示。

解决图片加载延迟问题

在图片轮播中，另一个常见的问题是图片加载延迟。如果图片尚未加载完成就开始播放动画，可能会导致动画效果不佳。为了解决这个问题，可以使用 Promise 来预加载图片。

以下是一个预加载图片的函数：

const loadImage = ref => new Promise(resolve => {
ref.img = new Image();
ref.img.onload = () => { ref.status = 'OK'; resolve(); };
ref.img.onerror = () => { ref.status = 'bad'; resolve(); };
ref.img.src = ref.path;
});

这个函数接受一个包含图片路径的对象 ref，创建一个新的 Image 对象，并监听 onload 和 onerror 事件。当图片加载完成或加载失败时，Promise 会 resolve。

完整的图片轮播示例

结合 animationend 事件和 Promise 预加载，可以实现一个更完善的图片轮播。

首先，定义图片数组：

const imageArray = [
{ path: 'https://picsum.photos/id/237/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/238/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/239/200/300', status: 'none', img: null },
{ path: 'https://picsum.photos/id/240/200/300', status: 'none', img: null }
];

然后，使用 Promise.all 预加载所有图片：

Promise.all(imageArray.map(el => loadImage(el)))
.then(() => {
// 移除加载失败的图片
for (let i = imageArray.length; i--;) {
if (imageArray[i].status === 'bad') {
imageArray.splice(i, 1);
}
}
if (imageArray.length === 0) {
console.log('problemo! no image are loaded!');
return;
}
let currentImg = 0;
setImage(currentImg);
setInterval(() => {
currentImg = ++currentImg % imageArray.length;
setImage(currentImg);
}, 5000);
});

最后，定义 setImage 函数来更新图片并添加动画：

function setImage(indx) {
changingImage.className = 'opa0';
changingImage.src = imageArray[indx].path;
changingImage.classList.replace('opa0', 'fade-in');
}

在这个函数中，首先将图片的透明度设置为 0 (opa0 类)，然后更新 src 属性，最后添加 fade-in 类来触发淡入动画。

CSS 样式

以下是相关的 CSS 样式：

.opa0 { opacity: 0; }
.opa1 { opacity: 1; }
.fade-in {
animation: fadeIn 3s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#changing-image {
display: block;
width: 200px;
height: 300px;
padding: 5px;
border: 1px solid lightseagreen;
margin: 1em;
}

HTML 结构

HTML 结构非常简单：

<img src=""  id="changing-image" class="opa0">

总结

通过监听 animationend 事件和使用 Promise 预加载图片，可以实现更流畅、更可控的图片轮播动画。这种方法不仅可以避免动画重复触发，还可以解决图片加载延迟导致的问题，从而提升用户体验。