Затенение в фоновом режиме при загрузке

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

$(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 прилагается. Когда он нагнетает огонь, он установит фон в div .about и увянет его.

Я изменил URL-адреса, чтобы показать некоторые результаты.