在加载背景图像中淡入淡出

Question

我想通过使用jquery加载一个随机背景图像。下面是我正在使用的脚本，它在刷新时显示随机背景，但没有淡入效果。我如何创建淡入效果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

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

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

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

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

我已更改网址以实际显示一些结果。