CSS 背景图片，加载后淡出

Question

一旦从外部 url 加载“图像”，我想淡入它，但从本地资源开始显示一个“imgPlaceholder”。

HTML 如下所示：

  <div className="bg-img" style={imgDivStyle}></div>

CSS 看起来像这样：

const imgDivStyle = {
  background: `url('${image}'), url('${imgPlaceholder}')`,
  backgroundSize: 'cover',
};

我想要发生的事情：从头开始显示“imgPlaceholder”并在加载后淡入“图像”。

实际发生的情况：“imgPlaceholder”从一开始就显示“图像”一旦加载就会立即显示。

这可以通过纯 CSS 实现吗？或者我是否需要使用例如加载图像jQuery并手动触发动画？

Answer 1

我找到了一个参考，它利用了@keyframes 以及动画帧中的一些属性，例如“不透明度”。

您可以尝试在此处引用链接中的一些代码 -

https://codepen.io/davidhc/pen/nLpJk

@keyframes fade
{
0%   {opacity:1}
33.333% { opacity: 0}
66.666% { opacity: 0}
100% { opacity: 1}
}

Answer 2

您无法检查图像是否单独加载了 css，因此您可以执行以下操作（代码中的 cmets 以显示正在发生的事情）：

$('.inner').each(function() {
  var div = $(this),
    background = div.data('background');  // get background

  $('<img/>').attr('src', background).load(function() {  // create an image element with inner background and load it
    $(this).remove();  // remove it
    
    // set the inner background image and fade in:
    div.css('background-image', 'url(' + background + ')').delay(200).fadeIn(2000); // need a little delay to let the div render it's bg image before the fade starts
  });
});

.default,
.inner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  /* just make sure inner div is same size as outer */
  width: 400px;
  height: 400px;
}

.default {
  background-image: url(https://lorempixel.com/900/900/city/1/); /* default background */
}

.inner {
  display:none; /* start of hidden */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="default"><!-- default div with default background image -->
  <div class="inner" data-background="https://lorempixel.com/900/900/city/2/"><!-- inner div with background-image set as data attribute -->

  </div>
</div>

如果你想动态创建内部 div，你可以这样做：

$('.background').each(function() {
  var div = $(this),
    background = div.data('background'), // get background
    html = div.html();  // get any contents

  $('<img/>').attr('src', background).load(function() {  // create an image element with inner background and load it
    $(this).remove();  // remove it
    div.empty();       // empty current div
    
    // create an inner div:
    $('<div/>')
      .css({
        'background-image': 'url(' + background + ')',
        'display': 'none'
      })                  // add background and hide
      .addClass('inner')      
      .html(html)           
      .appendTo(div)      // append to default div
      .delay(175)
      .fadeIn(2000); // need a little delay to let the div render it's bg image before the fade starts
  });
});

.background,
.inner {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.background {
  background-image: url(https://lorempixel.com/900/900/city/1/); /* default background */
  
  /* just make sure inner div is same size as outer */
  width: 400px;
  height: 400px;
}

.inner {width:100%; height:100%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background" data-background="https://lorempixel.com/900/900/city/2/"><!-- default div with default background image,  new background image set as data attribute -->
</div>