Показывать загрузку gif, пока не загрузятся все изображения?

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

Вот html-код, который я сейчас использую.

<div class="carousel-inner">
  <div class="item active">
    <img src="./img/bg_01.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>

  <div class="item">
    <img src="./img/bg_02.jpg" alt="" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
  </div>
</div>

Я гуглил о предварительной загрузке изображений, но не нашел ничего, что полностью соответствовало бы тому, что я хочу выполнить. Любая идея о том, в каком направлении я должен смотреть? Может быть, плагин ajax/jquery?

Спасибо! Эрик


jquery ajax twitter-bootstrap preloader image-preloader
person Eric Mitjans    schedule 30.01.2014    source источник
comment
вы можете написать простой скрипт jquery, который показывает div (со счетчиком в нем), пока все изображения не будут загружены с помощью .load()   -  person ntgCleaner    schedule 31.01.2014

Ответы (3)


arrow_upward
5
arrow_downward

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

$(window).onbeforeload(function(){
//Your code here
})

как только страница загружена и окно готово к использованию

$(window).load(function(){
//Your code here
});

Событие LOAD срабатывает только тогда, когда страница полностью загружена, а не только DOM страницы.

Вы также можете использовать заполнители изображений перед загрузкой, чтобы вместо изображения отображались только заполнители. После загрузки изображения местозаполнитель будет заменен фактическим изображением.

Надеюсь это поможет

person James    schedule 30.01.2014
comment
Обратите внимание, что .load для привязки к событию загрузки устарело, начиная с jquery 1.8, и удалено в 1.9. Пожалуйста, используйте .on("load" вместо этого. - person Kevin B; 31.01.2014

arrow_upward
1
arrow_downward

imagesLoaded может быть тем, что вы ищете

Обнаружение, когда изображения были загружены.

Демонстрация: http://imagesloaded.desandro.com/
github: https://github.com/desandro/imagesloaded

использование было бы довольно простым:

сначала покажите загрузку изображения, а затем скройте его с помощью строки JS:

imagesLoaded( '#container', function() { //hide loader });
person mgherkins    schedule 30.01.2014

arrow_upward
1
arrow_downward

Привет. Пожалуйста, проверьте следующую скрипку: Покажите загрузчик по умолчанию, привяжите событие загрузки к тегу img, а при вызове функции вы можете скрыть загрузчик.

http://jsfiddle.net/quDP4/

<div class="carousel-inner">
  <div class="item active">
      <div class="loader"></div>
    <img src="http://bartelme.at/material/hdr/hdr5.jpg" alt="" onload="loaded(this)" />
    <div class="container">
      <div class="carousel-caption">
      </div>
    </div>
 </div>
</div>

<script>
function loaded(imgloaded)
{
imgloaded.previousElementSibling.style.display="none";

}
</script>
person melwyn pawar    schedule 28.05.2014