title: Showing Loading Gif while Bootstrap Carousel is fully loaded
body: <p>I have a loading gif that appears on the screen until all the Bootstrap carousel slides are loaded. It got it working when the images were from lorempixel.com. But, now I have two images that I wish to load.</p>
  
  <p>The functionality works well on the first try. But, when I reload the page, the loading gif stays on the screen and will not disappear revealing the slides.</p>
  
  <p>My Bootstrap Slider Code:</p>
  
  <pre><code>&lt;div id="content"&gt;
  &lt;div id="homeCarousel" class="carousel slide" data-interval="3000" data-ride="carousel"&gt;
  &lt;div class="carousel-inner"&gt;
  &lt;div class="active item"&gt;
  &lt;img class="large" src="http://localhost/agency/img/slide1.jpg" /&gt;
  &lt;/div&gt;
  &lt;div class="item"&gt;
  &lt;img class="large" src="http://localhost/agency/img/slide1.jpg" /&gt;
  &lt;/div&gt;
  &lt;/div&gt;  
  &lt;a class="carousel-control left" href="#homeCarousel" data-slide="prev"&gt;
  &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class="carousel-control right" href="#homeCarousel" data-slide="next"&gt;
  &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="loading"&gt;
  &lt;img class="img-responsive" src="img/loading.gif"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Script in the Head Section:</p>
  
  <pre><code>&lt;script src="js/jquery-1.11.0.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function (){
  $('#content').hide();
  $('#loading').show();
  $('.large').bind('load', function() {
  $('#loading').hide();
  $('#content').fadeIn('slow');
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Can somebody tell me what I am doing wrong here? Thank you...</p>