0

I do not believe this to be a duplicate of How to display loading image while actual image is downloading As far as I can see the jquery solution merely loads on the loader image on the screen while I am looking for image to be placed in the precise position and to the exact dimensions of my jumbotron. I would also imagine that jquery would add a potential performance hit which is essentially what I am trying to avoid.

I have a large background image that takes up the full width and height of my jumbotron. I have taken several measures so that it loads more quickly but there is still a delay of about two seconds where the user is left looking at a blank space between my navbar and the rest of the page. Is there a way I can put something in the background of the background image (perhaps a low quality image that will load fast or a colored panel) so that something will be visible in the space while the image loads?

<style>
.jumbotron {
    position: relative;
    background: url("images/main.jpg") center center;
    width:1137px;
    height:342px;
    background-size: cover;
    overflow: hidden;
}

.jumbotron h1{
    color: #fff;
}

.jumbotron h2{
    color: #fff;
}

.jumbotron p{
    color: #fff;
}
</style>

<div class="container">
  <div class="jumbotron">
    <br><h2>What are <i>you</i> training for?</h1><br><br><br><br>
</div>
</div>
Community
  • 1
  • 1
gatorreina
  • 864
  • 5
  • 14
  • 1
    Possible duplicate of [How to display loading image while actual image is downloading](http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading) – Tim Troiano Dec 22 '15 at 17:40
  • I recently read an article that had a pretty nifty way to solve this. What they did is they made a blurry version of the image and saved it at a much lower resolution and then displayed that image on load while the larger image was downloading, then once the larger image was done, they replaced the blurry image with the large one. – APAD1 Dec 22 '15 at 17:47
  • Here's the article: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/ – APAD1 Dec 22 '15 at 17:49
  • How large is the image file? The dimensions aren't full screen so I doubt this image is huge. – JeffS Dec 22 '15 at 18:15
  • JeffS the image is big enough to take two to three seconds to load. – gatorreina Dec 22 '15 at 18:19

0 Answers0