在加載背景圖像中淡入淡出

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並淡入。

我已更改網址以實際顯示一些結果。