Javascript 获得许多元素的平滑淡入效果

我有一个图库页面，其中显示了一大堆照片缩略图（>50），我希望每个图像在加载时淡入。我已经设法让它工作，但淡入效果变得非常急促，一旦我试图淡入超过20个左右的图像在同一时间。是否有更好的方法平滑地对大量元素进行淡入

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

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

然后在代码中我做了

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

三种可能性：

如果这些是小图像，加载时间不长，那么我建议只在前二十个左右淡入淡出。如果你说可能有数百个动画同时运行（因为每一个都完全取决于加载的时间），那么我可以理解为什么这会阻碍速度

另一个选择是将淡入时间减少到半秒甚至四分之一秒，这样在其他过渡开始时过渡会更快完成

最后，为其中的“组”设置不同的类，其中一些组在开始加载之前被“暂停”。这样，组1首先加载，完成后，再加载组2，以此类推