javascript - 加载时CSS淡入背景图像

Question

我的页面有默认背景颜色和背景图片。

我希望在图像完全加载之前显示默认背景色。只有当图像加载时，它才能淡入。

到目前为止，我已经能够很好地淡入背景图像，但即使没有完全加载图像也会淡入。

我想实现类似于 WeTransfer 的东西

这是我的代码:

HTML

<div id="container-background">

<div id="child-background">

  <p>Text</p>

</div> <!--container-background-->

</div> <!-- child-background-->

CSS

#container-background
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#child-background
{
  background: #17181a;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100%;
  width: 100%;
  background-image: url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg);"
}

JS

$('#child-background').css('background', 'rgba(255, 255, 255, 0)');

Fiddle

请帮我只在加载时淡入背景图片，在未加载时显示默认背景色。

Answer 1

从 css 中删除背景图像并试试这个:

$('<img/>').attr('src', 'https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg').load(function() {
     $('#child-background').css('background-image','url(https://c1.staticflickr.com/4/3804/11129952164_63075cdbe9_b.jpg)');
    });

#container-background
{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  width: 100%;
}

#child-background
{
  background: #17181a;
  transition: background 0.7s linear;
  -webkit-transition: background 0.7s linear;
  height: 100%;
  width: 100%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container-background">

<div id="child-background">

  <p>Text</p>

</div> <!--container-background-->

</div> <!-- child-background-->