Показать загрузку gif до загрузки всех изображений?

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

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

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

источник

2014-01-30 Eric Mitjans

вы можете написать простой сценарий jquery, в котором показан div (с помощью счетчика в нем), пока все изображения не будут загружены с помощью '.load()' – ntgCleaner

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

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

Демо: http://imagesloaded.desandro.com/
GitHub: https://github.com/desandro/imagesloaded

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

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

imagesLoaded('#container', function() { //hide loader });

источник

2014-01-30 22:10:18

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

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

раз страница загружается и окно могло бы использовать

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

НАГРУЗКИ событие срабатывает только тогда, когда страница полностью загружена не только DOM страницы.

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

Надеется, что это помогает

источник

2014-01-30 22:16:03 James

. Примечание. '.load' для привязки к событию load не рекомендуется jquery 1.8, и удален в 1.9. Вместо этого используйте '.on (« load »). –

Привету Пожалуйста, проверьте следующую скрипку, Показать загрузчик по умолчанию, связать событие OnLoad на 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>

источник

2014-05-28 21:00:11

Показать загрузку gif до загрузки всех изображений?

ответ

Смежные вопросы