Question

我想使用jquery加载一个随机背景图像。下面是我正在使用的脚本，它显示了刷新时的随机背景，但没有fadeIn效果。如何创建fadeIn效果onload。注意：我不想循环随机图像。

$(document).ready(function() {
  var images = ['01.jpg', '02.jpg', '03.jpg', '04.jpg', '05.jpg', '06.jpg', '07.jpg', '08.jpg', '09.jpg', '10.jpg'];

  $('.about').css({'background-image': 'url(../img/bg/' + images[Math.floor(Math.random() * images.length)] + ')'});
  ('.about').fadeIn(1000);
});

Answer 1

＆＃13;

$(document).ready(function() {
  var images = ['http://funmozar.com/wp-content/uploads/2014/09/Beautiful-Yellow-Birds-06.jpg', 'http://petblaster.com/images/Birdwall.jpg', 'http://www.nscblog.com/wp-content/uploads/2014/04/birds-314989.jpg'];

  var url = images[Math.floor(Math.random() * images.length)];
  var img = new Image();
  img.onload = function(){
    $('.about').css({'background-image': 'url('+url+')', 'background-size' : 'contain'});
    $('.about').fadeIn(1000);
  }
  img.src = url;
  
  
});

＆＃13;

.about{
  width: 400px;
  height: 400px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="about"></div>

＆＃13;

这将使用new Image预加载图片。附加onload。当他上火时，它会将背景设置为.about div并将其淡入。

我已经更改了网址以显示某些结果。

在负载上淡入背景图像

1 个答案: