Question

有没有办法确保在页面上显示任何其他内容之前，始终首先显示（300K）大背景图片？

在服务器上，我们可以访问PHP。

Answer 1

所有html内容在开始获取图像之前都会被提供和解析，因此在开始之前就会遇到问题。

您可以通过以编程方式隐藏内容，然后在加载图像时触发它的“显示”来规避这一点。

即：

<html>
  <body>
    <image here/>
    <div id="content" style="display:none;" >

    </div>
    <script type="psudocode"> 
     when(image.loaded){ 
          $("#content").show();
     }
    </script>
  </body>
</html>

Answer 2

如果您拥有容器内的所有内容，那么使用此技术可能会非常接近。如果javascript被禁用/不可用，它也会优雅地失败。

因此，如果你因为经理或其他事情而必须这样做，这就是我要使用的方法。

<html><head><!-- head section --></head>
<body>
    <div id="container">
       <script type="text/javascript">
       <!--
         document.getElementById('container').style.display = 'none';
       -->
       </script>
       Content goes here
    </div>
    <script type="text/javascript">
    <!--
      document.getElementById('container').style.display = 'block';
    -->
    </script>
</body></html>

但是，如果你的内容很少，它可能不会带来太多好处。你当然可以在第二个javascript块上添加一个计时器，将它延迟一秒左右：P

Answer 3

<html><head>
<script type="text/javascript">
//Hide on load
onload=function(){
    document.body.style.display="none";
    var imag = new Image();

    imag.onload=function(){
        var main = document.body;
        main.style.backgroundImage="url("+this.src+")";
        main.style.display="";

    };
    imag.src="http://dayton.hq.nasa.gov/IMAGES/MEDIUM/GPN-2000-001935.jpg";
}
</script>
</head>
<body>
    YOU CAN' T SEE MEE!!
</body>
</html>

Answer 4

如果您不想依赖JavaScript，可能的方法是创建仅包含背景图像的虚拟页面。几秒钟后，它会重定向到真实页面，后台将快速加载，因为它已经在缓存中。

不是一个超级有吸引力的解决方案，如果定时是固定的，我估计请注意，300KB对于背景图像来说非常大。我看到更糟糕的是，有人使用1MB图像：即使连接速度相对较快，我也能看到页面元素后面的背景加载方式。

Answer 5

我认为你能够做到这一点的唯一方法就是使用javascript - 发送用户HTML，其中仅包含你的背景图片和一些javascript，它们会在显示其余内容之前等待一段时间或者使用AJAX来检索其余内容（基本上是相同的东西）。

Answer 6

您可以将页面中的图像作为base64图像加载，然后它就会加载页面。

如何在页面加载之前确保显示背景图像？

6 个答案: