Load Bootstrap Carousel

Asked

Viewed 1,944 times

5

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

For this I put a similar bootstrap Carousel 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. content below the "up" page until the image is loaded.

My question is: how to make the bootstrap Carousel have a load to wait for the image to be loaded, without the page being "dancing"?

Obs.: The image varies in height, therefore, I can not place one height or min-height in the Carousel div, to delimit its initial size.

As for the code is exactly like the 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>
javascript image twitter-bootstrap

  • 200k!?!? You can’t optimize this (jpg 60-80%)?

  • You could paste some snippets of code, can help when answering.

  • 200k at 60%, are images of 2000x600px, so the size "absurd".

  • @Oniltonmaciel, follows code in question.

  • 1

    Unused min-height? It’s like asking, "I’m thirsty... what am I doing? But I can’t take fluids or receive serum because I’m allergic to fluids and injections." - impossible mission type. I think you can and should use min-height. Enjoy and also use the class img-responsive on your tag img.

  • You can, on the server-side, using a library that handles images, get the exact height of the first image to be loaded. Then apply that height on min-height.

  • @J.Bruni That’s why it gets complicated, because the image is always responsive! If you could min-height was already in html. I will check what was passed on to get the height of the image and pass on the feedback.

Show 2 more comments

2 answers

2

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

.carousel-inner {
      display: none;
}

then you insert a script:

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

This way, besides waiting to load to display, it does not appear at once, appears in a more user-friendly way, and there are still other options to pass the .show so that the carousel is loaded in the way you think best...

  • I ended up using this form. If you can’t make the mistake, join it and make it look "elegant". Thanks @Kennyrafael

  • For it is...sometimes some "alternative methods" are necessary. xD

0

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

  • Unfortunately even with progressive JPEG the image still doesn’t work as it should. It does not load the space at first, but rather will load the images in "slices" which would not like to occur.

Browser other questions tagged javascript image twitter-bootstrap

You are not signed in. Login or sign up in order to post.