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

How can I make sure a background image displays before the page loads?

本文关键字：显示 图像 背景 加载 何确保 确保      更新时间：2023-09-26

在页面上显示任何其他内容之前，是否有方法确保首先显示（大的，300K）背景图片？

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

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

您可以通过以编程方式隐藏内容，然后在加载图像时触发其"显示"来避免这种情况。

即：

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

如果您将所有内容都放在一个容器中，那么使用此技术可能会非常接近。如果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

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

如果您不想依赖JavaScript，一种可能的方法是制作一个只有背景图像的虚拟页面。几秒钟后，它重定向到真实页面，后台将快速加载，因为它已经在缓存中了。

我认为，如果时间固定的话，这不是一个非常有吸引力的解决方案
请注意，300KB对于背景图像来说是相当大的。我见过更糟糕的情况，有人使用1MB的图像：即使有相对快速的连接，我也可以看到背景加载在页面元素之后。

我认为唯一能做到这一点的方法是使用javascript-向用户发送只包含背景图像的HTML和一些javascript，这些javascript要么在显示其余内容之前等待一定时间，要么使用AJAX检索其余内容（本质上是一样的）。

您可以将页面中的图像加载为base64图像，然后它将与页面一起加载。

相关文章：