logo标签列表

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

javascriptjqueryhtmlcssfiddle
21

这是我的Fiddle示例。


我想让css中的“background-image:”在3秒后完全加载并以快速淡入效果显示，与此同时整个div必须是黑色。
如何在css或javascript中实现。

.initials {
    position:absolute;
    background:black;
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    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;
}
<div class="initials">A</div>

2
也许您可以使用CSS3转换，否则您可能需要考虑使用JavaScript（jQuery）。 - Perrykipkerrie
8个回答
15

只需进行一些小的更改，我可能已经只使用CSS3实现了您想要的效果。 请查看此示例：http://jsfiddle.net/w11r4o3u/

CSS：

.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;  
}

HTML：

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

编辑:

现在动画将在3秒后开始，需要0.3秒完成。这是代码示例: http://jsfiddle.net/w11r4o3u/1/

  • 要调整fadeIn发生的速度，请编辑-webkit-animation-duration: .3s;

  • 如果您想要调整动画开始的"延迟"时间，请编辑-webkit-animation-delay: 3s;

请注意，OP要求在3秒后快速淡入，而不是3秒淡入，可能需要相应地编辑您的答案。 - valepu
已经进行了编辑，现在我还解释了哪些属性控制动画的“速度”和“延迟”。 - Inacio Schweller
如何在显示图像之前完全加载它，以便淡入效果后没有图像缓冲区？ - Zack
图片已经加载，即使因为不透明度而未显示。请在您的 Chrome 开发者工具 中检查 网络 选项卡。 - Inacio Schweller
5

也许像这样……但是淡入效果比较棘手——据我所知，无法淡化background-image属性。

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

另一种选择是将HTML分成三个部分，最高z-index的字母，然后在星层上覆盖黑色层......然后淡化黑色层。
3

另一种选择是创建一个单独的类并将该css分配给该类。请查看此处

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

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

然后在你的CSS中，将initials更改为：
 .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");
  }
谢谢！你现在看到了吗？ - Lucas Rodriguez
如何在显示图像之前使其完全加载？ - Zack
我的网站包含很多图片，这些图片与其他所有图片一起加载，导致在淡入效果之后只加载了一半。 - Zack
对于拥有高速连接的人来说，它会很流畅，而对于连接速度适中的人来说，gif图像将逐帧加载。 - Zack
当您在样式表中声明background-image时，无论您在文档中如何调用该类或不调用，浏览器解析样式表时都会立即下载该图像。 - Lucas Rodriguez
3
你可以使用背景图片属性创建一个绝对定位的 div，然后使用 animate.css 添加动画效果，而无需自己创建关键帧。

http://jsfiddle.net/n9wd4ver/5/

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

}

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

.initials.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;
}

.initials-container {
    height: 100%;
    margin-top:20px;
    margin-left:20px;
    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;
}

HTML：

<div class="initials-container">
    <div class="initials initials-background animated fadeIn"></div>
    <div class="initials initials-text">A</div>
</div>

编辑: OP在评论中问如何检查图像是否已加载。我假设您不想使用jQuery，因此可以使用一个名为imagesLoaded的库（适用于带有或不带有jQuery），以此方式检查图像是否已加载：

http://jsfiddle.net/n9wd4ver/7/

CSS

.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;
}

HTML

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

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

JavaScript

imagesLoaded( '#initials-background', { background: true }, function() {
    console.log("image loaded");
  var d=document.getElementById("initials-background");
  d.className=d.className +" animated";
});
如何在显示图像之前使其完全加载？ - Zack
我在我的答案末尾添加了一种方法，可以在开始动画之前检查图像是否已加载 - valepu
3

这里是解决方案，背景图片将在几秒钟后出现。

演示

HTML

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

Css

.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);
});
".fadeIn() 应用于您所选的 DOM 元素，而不是通过 .css() 更改的属性；背景图像只是在没有适当淡入的情况下立即更改。" - Inacio Schweller
如何在显示图像之前使其完全加载？ - Zack
2

JQuery

 $('.initials').css('background-image','url(http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif)');
 $('.initials').fadeIn(3000);
这会将所有内容淡入 - 不是 OP 想要的。 - StudioTime
2
你可以尝试这样做： 更新的Fiddle 注意：你可以通过替换url为高清图片url来测试它。 

function loadImage() {
  var url = 'http://www.webgranth.com/wp-content/uploads/2013/04/Ceric6.gif';
  var img = $("<img />").attr('src', url)
    .on('load', function() {
      $(".test").append(img).fadeIn(400);
    });
}

(function() {
  setTimeout(function() {
    $(".bgImage").fadeIn(400);
  }, 3000);

  loadImage()
})()
.content {
  z-index: 1;
  position: relative;
  margin-top: 20px;
  text-align: center
}
.initials {
  position: fixed;
  background: black;
  color: white;
  width: 60px;
  height: 60px;
  margin-top: 20px;
  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;
}
.bgImage {
  background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
  width: 100%;
  height: 60px;
  position: absolute;
  display: none;
  z-index: 0;
}

.test {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="initials">
  <div class="bgImage"></div>
  <div class="content">A</div>
</div>

<div class="test"></div>

参考 - 使用jQuery异步加载图片.

如何在显示图像之前使其完全加载？ - Zack
理想的方式是使用Promise。在加载时调用一个函数来加载图像，一旦完成，该函数将返回一个Promise。根据这个Promise，你可以淡入div。不幸的是，即使我也要学习Promise部分，但我会使用回调更新我的答案。 - Rajesh
1
@Zack 我已经更新了我的答案。我还找到了一篇关于加载异步图片的文章，并提供了链接。希望这可以帮到你！ - Rajesh
1

.initials {
    position:absolute;
    background:black;
    background-image: url("http://static.tumblr.com/lxn1yld/Hnxnxaqya/space.gif");
    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;
}
<div class="initials">A</div>

如果您提供一些上下文信息，那将会很有帮助。为什么您的答案与上面的答案不同？它对解决问题有什么作用？它是否真正解决了问题？ - Derek Van Cuyk
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接