Javascript 如何延迟div中背景图像的显示

这是我的

我只希望css中的“

背景图像：

”完全加载，并在3秒钟后以快速淡入效果显示，直到那时，整个div必须为黑色。
如何在

css

或

javascript

中实现

。首字母{
位置：绝对位置；
背景：黑色；
背景图像：url（“http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
颜色：白色；
边缘顶部：20px；
填充顶部：20px；
垫底：20px；
宽度：60px；
文本对齐：居中；
左边距：20px；
字号：17px；
字母间距：5px；
盒影：0px2p3pRGBA（0,0,0,15）；
溢出：隐藏；
空白：nowrap；
}

A

JQuery

 $('.initials').css('background-image','url(http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif)');
 $('.initials').fadeIn(3000);

---

也许像这样…淡入是很棘手的-好吧，你不能淡入背景图像属性

setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000)

---

另一个选项是将HTML分成3个部分，z索引最高的字母，然后是黑色层，覆盖在星形层上……然后淡出黑色层。另一个选项是使用单独的类并将css分配给该类。查查这个

首先在document.ready中设置一个方法：

$( document ).ready(function() {
       var changeClass = function() {
             $(".initials").addClass("with-image");
       }
       setTimeout(changeClass, 3000);
});

然后在css中将首字母改为：

 .initials {
     position:absolute;
     background:black;
     background-COLOR: black; 
 ...

并加上：

 .with-image {
       background-color:none !important;
       background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  }

---

可以使用“背景图像”属性创建绝对定位的div，然后使用添加动画，而无需自己创建关键帧

HTML:

HTML

---

通过一些小的改动，我可能已经用CSS3实现了您想要的。 检查小提琴：

CSS:

HTML:

A

已编辑：

现在动画在3秒后开始，需要0.3秒才能完成。这是小提琴：

• 要调整fadeIn发生的“速度”，请编辑

  -webkit动画持续时间：.3s
  

• 如果要将动画“延迟”调整为开始，请编辑

  -webkit animation delay:3s
  

---

这是解决方案，几秒钟后会出现背景图像
Html
剧本

$(document).ready(function() {
setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000);
});

---

您可以尝试以下方法：
注意：您可以通过将url替换为和HD图像url来测试它

函数loadImage（）{
var url='1〕http://www.webgranth.com/wp-content/uploads/2013/04/Ceric6.gif';
变量img=$（“
.content{
z指数：1；
位置：相对位置；
边缘顶部：20px；
文本对齐：居中
}
.姓名首字母{
位置：固定；
背景：黑色；
颜色：白色；
宽度：60px；
高度：60px；
边缘顶部：20px；
文本对齐：居中；
左边距：20px；
字号：17px；
字母间距：5px；
盒影：0px2p3pRGBA（0,0,0,15）；
溢出：隐藏；
空白：nowrap；
}
.bgImage{
背景图像：url（“http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
宽度：100%；
高度：60px；
位置：绝对位置；
显示：无；
z指数：0；
}
.测试{
显示：无；
}

A.

。首字母{
位置：绝对位置；
背景：黑色；
背景图像：url（“http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
颜色：白色；
边缘顶部：20px；
填充顶部：20px；
垫底：20px；
宽度：60px；
文本对齐：居中；
左边距：20px；
字号：17px；
字母间距：5px；
盒影：0px2p3pRGBA（0,0,0,15）；
溢出：隐藏；
空白：nowrap；
}
A
也许您可以使用javascript（jQuery），否则您可能会考虑使用javascript（jQuery）。这会将所有内容淡入淡出-而不是OP想要的内容。fadeIn（）应用于您选择的DOM元素，而不是通过.css（）更改的属性；背景图像只是即时更改，没有适当的淡入。如何在显示之前完全加载图像？请注意，OP要求在3秒后快速淡入，而不是3秒淡入，可能需要根据您的答案进行编辑。我已经进行了编辑，现在我还解释了哪些属性控制“速度”和“延迟”"对于动画。如何在显示之前完全加载图像，以便在淡入效果后没有图像缓冲区？图像已经加载，即使它由于不透明度而未显示。请在“网络”选项卡中查看您的Chrome开发工具。谢谢！您现在看到了吗？如何在显示之前完全加载图像？我的网站B站点包含大量图像，此图像与所有其他图像一起加载，使其在淡入淡出效果后加载一半。对于具有高速连接的用户，它将是平滑的，而对于具有中等连接的用户，gif图像将逐帧加载。当您在样式表中声明背景图像时，图像将当浏览器正在解析您的样式表时，无论您在文档中称该类为什么，或者您不知道如何在图像显示之前将其完全加载？理想的方法是使用
Promise
。加载时调用加载图像的函数，一旦完成，此函数将返回Promise。基于是承诺，你可以fadeIn div。不幸的是，即使我必须学习承诺部分，但将使用更新我的答案callbacks@Zack我已经更新了我的答案。我还找到了加载异步图像的帖子，并给出了链接。希望这有帮助！如何在图像显示之前完全加载图像？我在答案的末尾添加了一种检查方法如果在开始制作动画之前已经加载了一幅图像，那么如果您提供一点关于您答案的上下文就会有所帮助。为什么您的答案与上面的答案不同？它对解决问题有什么作用？它甚至解决了问题吗？
<div class="initials-container">
    <div class="initials initials-background animated fadeIn"></div>
    <div class="initials initials-text">A</div>
</div>

.initials {
  width: 100%;
  height: 100%;

}

.initials.initials-text {
  padding:20px 0px;
  position: relative;
  z-index: 2;
}

#initials-background {
  position: absolute;
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  animation-delay: 3s;
  z-index: 1;
  opacity: 0;
}

#initials-background.animated {
  opacity: 1;
}



.initials-container {
    margin-top:20px;
    margin-left:20px;
    height: 100%;
    position:relative;
    background:black;
    color:white;
    width:60px;
    text-align:center;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

<div class="initials-container">
<div id="initials-background" class="initials fadeIn">

</div>
<div class="initials initials-text">
A
</div>
</div>

imagesLoaded( '#initials-background', { background: true }, function() {
    console.log("image loaded");
  var d=document.getElementById("initials-background");
  d.className=d.className +" animated";
});

.initials {
    position:relative;
    background:black;
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}
.initials .text {
    position: relative;
}

@-webkit-keyframes test {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1
  }
}

.initials:before{
  content: "";
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-animation-name: test;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-out;  
}

<div class="initials"><div class="text">A</div></div>

<div class="initials">A</div>

.initials {
    position:absolute;
    background-color:#000;
    color:white;
    margin-top:20px;
    padding-top:20px;
    padding-bottom:20px;
    width:60px;
    text-align:center;
    margin-left:20px;
    font-size:17px;
    letter-spacing:5px;
    box-shadow:0px 2px 3px rgba(0,0,0,.15);
    overflow: hidden;
    white-space: nowrap;
}

$(document).ready(function() {
setTimeout(function(){
    $('.initials').css('background-image', 'url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif")');
}, 3000);
});