为许多元素顺利淡入淡出

Question

我有一个画廊页面，显示了一大堆照片缩略图（＆gt; 50），我希望每个图像在加载时淡入。我设法让它工作，但是一旦我试图同时淡入20多张图像，淡入效果会变得非常生涩。是否有更好的方法可以顺利地为大量元素进行淡入淡出？

现在我正在做的是使用css转换，因此每个元素最初都有

.aThumbnail {
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
}

然后在代码中我做

aThumbnail.onload = function(){
  this.style.opacity = 1;
}

Answer 1

三种可能性：

1. 如果这些是不需要很长时间加载的小图像，那么我建议只在前20个左右褪色。如果你正在谈论可能会有数百个动画同时进行（因为每个动画完全取决于它加载的时间），那么我就能看出为什么会降低速度。
2. 另一种选择是将你的时间减少到第二次淡出的一半甚至四分之一，这样过渡就会在其他人开始时更快完成。
3. 最后，为它们的“组”设置不同的类，其中一些组在开始加载之前被“暂停”。这样，第1组首先加载，第1组加载，然后加载第2组，等等。