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

you can write a simple jquery script that shows a div (with a spinner in it) until all images are loaded with `.load()` — ntgCleaner, Jan 30 '14 at 22:12

score 5 · Answer 1 · answered Jan 30 '14 at 22:16

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

Note, `.load` for binding to the load-event is deprecated as of jquery 1.8, and removed in 1.9. Please use `.on("load"` instead. — Kevin B, Jan 30 '14 at 22:40

score 1 · Answer 2 · answered Jan 30 '14 at 22:10

imagesLoaded might be what you're looking for

Detect when images have been loaded.

Demo: http://imagesloaded.desandro.com/
github: https://github.com/desandro/imagesloaded

usage would be pretty simple:

initially show you loading image, then hide it with a line of JS:

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

score 1 · Answer 3 · answered May 28 '14 at 21:00

Hi Please check the following fiddle, Show the loader by default,bind an onload event onto the img tag and on function call you may hide the loader

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>

Show loading gif until all images are loaded?

3 Answers3