Question

我希望从外部网址加载后淡入“图片”，但是从本地资源开始就显示“imgPlaceholder”。

HTML看起来像这样：

1   "first_name=Jimmy","last_name=Reyes","email=jreyes0@macromedia.com","date=12/29/2016","opt-in=FALSE",
2   "first_name=Doris","last_name=Wood","email=dwood1@1und1.de","date=04/22/2016","opt-in=0",
3   "first_name=Steven","last_name=Miller","email=smiller2@go.com","date=07/31/2016","opt-in=FALSE",
4   "first_name=Earl","last_name=Parker","email=eparker3@ucoz.com","date=01-08-17","opt-in=FALSE",
5   "first_name=Barbara","last_name=Cruz","email=bcruz4@zdnet.com","date=12/30/2016","opt-in=FALSE",

CSS看起来像这样：

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

我想要发生的事情：从一开始就显示“imgPlaceholder”，一旦加载就显示淡入“图像”。

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

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

Answer 1

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

$('.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>

Answer 2

我找到了一个使用@keyframes的引用以及一些属性，例如＆＃39; opacity＆＃39;在动画框架内。

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

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

public class CategoryStatsVM
{
    public string   Name    { get; set; }
    public virtual  ICollection<Product>   Products   { get; set; }
    public int      Count   { get; set; }
    public decimal  MinPrice    { get; set; }
    public decimal  MaxPrice    { get; set; }
}

CSS背景图片，淡入淡出一次

2 个答案: