Javascript 加载时淡入背景图像

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

$(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);
});

$（文档）.ready（函数（）{
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=新图像（）；
img.onload=函数（）{
$（'.about'）.css（{'background-image'：'url（'+url+'），'background size'：'contain'}）；
$（'.about'）.fadeIn（1000）；
}
img.src=url；
});
。关于{
宽度：400px；
高度：400px；
显示：无；
}

添加另一个dollarsign，并在尝试淡入前隐藏该元素，以便在该元素已淡入时不会加载图像。特别是当图像较大时。我添加了dollarsign，但它现在仍在工作。如何确保在fadein效果之前加载背景图像？在将其附加到
关于
之前，请先预加载它，然后再将其加载到图像加载程序上。如果图像已加载，则在“关于”元素上渲染背景并淡入