Javascript：页面加载时淡入图像；一个接一个？

我创建了以下代码，在页面加载时添加不透明度：1到页面上的所有div。在这样做的过程中，所有图像都会显示在pageload上，但我希望每个图像都慢慢淡入，在其中一个图像完全加载/可见后，我希望第二个图像加载完全相同，然后再加载第三个图像

如何通过下面的代码实现这一点；需要更改/添加哪些内容？请注意，它必须使用纯Javascript；没有CSS3或jQuery，因为我使用的专有框架需要纯JS

var-imageOne=document.getElementById（'imageOne'）；
var imageTwo=document.getElementById（'imageTwo'）；
var imageThr=document.getElementById（'imageThr'）；
函数fadeIn（）{
imageOne.style.opacity='1'；
imageTwo.style.opacity='1'；
imageThr.style.opacity='1'；
}

#imageOne{
背景：url（'https://thingiverse-production-new.s3.amazonaws.com/renders/16/04/2d/b5/ed/smiley_face_thumb_small.jpg');
背景重复：无重复；
宽度：50px；
高度：50px；
右边距：20px；
浮动：左；
不透明度：0；
}
#图像二{
背景：url（'http://www.mpaart.org/wp-content/uploads/2015/07/twitter-logo-round-50x50.png');
背景重复：无重复；
宽度：50px；
高度：50px；
右边距：20px；
浮动：左；
不透明度：0；
}
#成像仪{
背景：url（'http://orig08.deviantart.net/24c1/f/2009/238/d/8/small_50x50__png_clock_pic_by_counter_countdown_ip.png');
背景重复：无重复；
宽度：50px；
高度：50px；
浮动：左；
不透明度：0；
}

---

您可以使用CSS转换，它更快，并且不需要jQuery

.fadeIn {
    transition: opacity 1.25s;
}

将类

fadeIn

添加到图像元素中，现在它将淡入淡出状态

要使其一个接一个地淡出，请使用JavaScript计时器将不透明度设置为1。例如：

var elements = [ /* Image elements to fade */ ];

for (var i = 0; i < elements.length; i++) {
    setTimeout(function() {
        elements[i].style.opacity = 1;
    }, 1250 * i);
}

var elements=[/*要淡入淡出的图像元素*/]；
对于（var i=0；i

您可以使用fadeIn的回调函数加载其他图像

function fadeIn() {
$("#imageOne").fadeIn("fast",function(){
      $("#imageTwo").fadeIn("fast", function(){
           $("#imageThr").fadeIn("fast");
      });
   });
 }

---

这就是我到目前为止想到的。不幸的是，我还不知道如何让它们淡入，因为下面的内容只是让它们一个接一个地出现。虽然它是纯Javascript

有什么建议吗

var-imageOne=document.getElementById（'imageOne'）；
var imageTwo=document.getElementById（'imageTwo'）；
var imageThr=document.getElementById（'imageThr'）；
功能fadeIn（元素）{
element.style.opacity+=0.9；
if（element.style.opacity<1）{
setTimeout（函数（）{
法代因（元素）；
}, 100);
}
}
setTimeout（函数（）{
fadeIn（document.getElementById（“imageOne”）；
}, 1000);
setTimeout（函数（）{
fadeIn（document.getElementById（“imageTwo”）；
}, 5000);
setTimeout（函数（）{
fadeIn（document.getElementById（“imageThr”）；
}, 10000);