javascript - 使许多元素平滑淡入

Question

我有一个显示一大堆照片缩略图 (>50) 的画廊页面，我希望每张图片在加载时淡入。我已经设法让它工作了，但是一旦我试图同时淡入超过 20 张左右的图像，淡入效果就会变得非常不稳定。有没有更好的方法来平滑地淡入大量元素？

现在我正在做的是使用 css transitions 所以每个元素最初都有

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

然后在我的代码中

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

Answer 1

三种可能性:

1. 如果这些是不需要很长时间加载的小图片，那么我建议只淡化前二十张左右。如果您正在谈论可能同时运行数百个动画(因为每个动画完全取决于加载时间)，那么我可以理解为什么这会降低速度。
2. 另一种选择是将淡入时间减少到半秒甚至四分之一秒，这样过渡就可以在其他过渡开始时更快完成。
3. 最后，为它们的“组”设置不同的类，其中一些组在开始加载之前被“暂停”。这样，首先加载第 1 组，完成后，再加载第 2 组，依此类推。