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

У меня есть сайт с полноэкранной фоновой каруселью и загрузкой gif при загрузке окна. Проблема в том, что в зависимости от сайта у меня в карусели от 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>

carousel jquery twitter-bootstrap image-preloader
person Eric Mitjans    schedule 31.01.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

<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>

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

Благодаря dtech, нашел здесь.

person Eric Mitjans    schedule 01.02.2014