css - 大的非重复背景，需要预加载器来加载其中的一部分

<分区>

我有background , 图片大小是 6 MB 我不能写 background: url(...).

这个长页面由 6 个部分组成，我决定将背景分成 6 张图片，我希望每个 block 的背景依次加载，并在加载背景之前在每个 block 中显示一个预加载器。

<div class="page" id="page_1">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>

<div class="page" id="page_2">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>

<div class="page" id="page_3">
   <div class="preloader"></div>
   <div class="page-content"></div>
</div>
.......

最佳答案

根据@meager 的 comment ，您最好将包含船的部分、页脚和重复背景分开。我已经为这个做好了功课。

查看 this JSFiddle看看我是如何测试它的。

HTML代码

<html>
  <head>
    ...
  </head>
  <body>
    <div id="top-image">
    </div>
    ...
  </body>
</html>

CSS 代码

对于顶部:

#top-image {
    background: url('top.jpg');
    background-repeat: no-repeat; /*to counteract the default value*/

    width: 100%; /*this may get screwed up otherwise*/
    height: 850px; /*allowing a bit more height to remain safe*/
}

对于中间的重复部分:

body {
    background: url('middle.jpg');
    background-repeat: repeat-y; /*want this one to repeat*/
    background-position: 0px 835.5px; /*so it fits perfectly with the overlayed image*/
}

对于底部页脚: