Load Bootstrap Carousel

Navigation
5

I'm developing a portal, with Bootstrap (3.1).

For this I put a carousel equal to the bootstrap on HEADER of the page and the content just below that carousel. This is where the problem occurs, when loading the page, as the images have a certain weight - 200kb approx, the content that lies below the page "goes up" until the image is loaded.

My question is: how to make the bootstrap carousel have a load to wait for the image to load without the page getting "dancing"?

Note: The image varies in height so I can not put a height or min-height in the carousel div to delimit the initial size of it.

As for the code it's exactly like Bootstrap with an "h2" and a "p" below. As below:

                                            

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

  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div> 
<h2>Título da Página</h2>
<p>Texto texto texto</p>
    
asked by anonymous 13.02.2014 / 14:22

2 answers

2

If you have an average carousel load time, you can hide it and display it only after it has been loaded, + - like this: 

.carousel-inner {
      display: none;
}

there you enter a script: 

setTimeout(function(){
     $('.carousel-inner').show("slow");
}
,3000);//aqui você ajusta os milisegundos pra exibir o carrossel

In this way, in addition to waiting to load to display, it does not appear at once, appears in a more pleasant way to the user, and there are other options to pass .show so that the carousel is loaded the way you find it better ...

    
13.02.2014 / 23:36
0

If saving the images again is an option, I would try to save as progressive JPEG, the browser will begin to display the image bit by bit already in the right size before it is 100% downloaded

    
13.02.2014 / 23:06
Changing a Dropdownlist through a search What is the proper folder architecture to apply to a web project?