Javascript：在页面加载之前隐藏图像然后淡入图像，工作但不太正确

Question

首先是没有jQuery。我已经在jQuery上完成了这个，但我想让它在Javascript上运行。

---

window.onload = function（）{

var target = document.getElementById('homeimg');
var opacity = 0;
var fader = setInterval(function() {

    if ( opacity <= 100 ) {
        target.style.opacity = ( opacity / 100 );
    }
    else {
        clearInterval(fader);
    }

    opacity += .50;

    }, 100); // End setInterval function

} //结束window.onload

---

当我隐藏css中的div（#homeimg {display：none}和{display：hidden}）时，图像根本不加载..

该功能有效，但当页面加载时，图像会瞬间可见，然后图像会消失，然后慢慢淡入。

我想隐藏图片，以便它只会淡入。

谢谢

Answer 1

这是因为对于前100毫秒，不透明度是默认值（1）。在100毫秒之后，你的setInterval函数启动并开始淡化图像。

在您设置target变量的行下方添加此项：

target.style.opacity = 0;

或者使用CSS样式将不透明度设置为0而不使用JavaScript：

#homeimg {
  opacity: 0;
}