Отображается загрузка gif только до загрузки определенного количества изображений

Question

У меня есть сайт с полноэкранным каруселем фона и загрузочный экран на загрузке окна. Проблема в том, что в зависимости от сайта у меня есть 10-40 изображений в карусели, а это значит, что загрузка gif будет слишком долго вращаться.

Я думаю, что было бы хорошей идеей фактически отображать загрузку gif только до загрузки первых 5 изображений. Это, плюс 10 секунд, на которые отображается каждое изображение, дает достаточно времени для загрузки других изображений.

Проблема в том, что я не знаю, как подойти к этому решению. Есть предположения?

Вот мой JQuery:

<script type="text/javascript"> 
    var image = new Image(); 
    image.src = 'img/loading.gif'; 
//<![CDATA[ 
    $(window).load(function() { // makes sure the whole site is loaded 
    $('#status').fadeOut(); // will first fade out the loading animation 
    $('#preloader').delay(350).fadeOut('slow', function(){ 
     $("#carousel-example-generic").attr('data-ride', "carousel"); 
    }); // will fade out the white DIV that covers the website. 
    $('body').delay(350).css({'overflow':'visible'}); 
    }); 
//]]> 
</script> 

И кусок моего HTML:

<div id="carousel-example-generic" class="carousel slide" data-ride="0"> 

<div class="carousel-inner"> 
<div class="item active"> 
    <img src="./img/1.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/2.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/3.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/4.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/5.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/6.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/7.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/8.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/9.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="./img/10.jpg" alt="" /> 
    <div class="container"> 
     <div class="carousel-caption"> 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

Нашли хороший и простой способ!

<script> 
var numImagesLoaded = 0; 
function incrementAndCheckLoading(){ 
    numImagesLoaded++; 
    if(numImagesLoaded == 3){ 
     //kill loading screen, launch carousel 
    } 
}  

image1 = new Image(); 
image1.src = "img/1.jpg" 
image1.onload = incrementAndCheckLoading; 
image2 = new Image(); 
image2.src = "img/2.jpg" 
image2.onload = incrementAndCheckLoading; 
image3 = new Image(); 
image3.src = "img/3.jpg" 
image3.onload = incrementAndCheckLoading; 
</script> 

С помощью этого скрипта, экран загрузки исчезнет, ​​когда Firsts 3 изображений загружаются, а потому каждое изображение во время й количества секунд, на сайте есть время, чтобы загрузить другие изображения на спине.

благодаря dtech, found here.