加载bootstrap jumbotron图像时显示背景

Question

我不相信这是How to display loading image while actual image is downloading的副本。据我所知，jquery解决方案只是加载到屏幕上的加载器图像，而我正在寻找将图像放置在精确位置的图像到我的jumbotron的确切尺寸。我还想象jquery会增加潜在的性能损失，这本质上是我想要避免的。

我有一个很大的背景图像，占据了我的jumbotron的全宽和高度。我采取了一些措施，以便加载更快，但仍然有大约两秒的延迟，用户只能看到导航栏和页面其余部分之间的空白区域。有没有办法可以在背景图像的背景中放置一些东西（可能是低质量的图像，可以快速加载或彩色面板），以便在图像加载时在空间中可以看到某些东西？

<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>