Show loading gif until all images are loaded?

Question

I'm building a portfolio site with Bootstrap 3, using a carousel as full background. What I want is to be able to show a loading gif till the array of images of every site is loaded, as the images will be big.

Here's the html code i'm using right now.

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

I've googled about image preloading but I don't find anything that quite fits what I want to acomplish. Any idea on to which direction should I be looking? Maybe a ajax/jquery plugin?

Thanks! Eric

Answer 1

to show gif loader until images are ready use

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

once page is loaded and window is ready use

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

LOAD event will trigger only when page is fully loaded not just the DOM of the page.

You can also use image place holders onbeforeload so it will show only placeholder instead of the image. Once image is loaded, placeholder will be replaced with the actual image.

Hope this helps