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

Is there a way to make sure a (large, 300K) background picture is always displayed first BEFORE any other content is shown on the page?

有没有办法确保在页面上显示任何其他内容之前,始终首先显示(大型,300K)背景图片?

On the server we have access to PHP.

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

6 个解决方案

#1

All the html content is served and parsed before it even starts to fetch the image, so you have a problem before you start.

所有的html内容在开始获取图像之前都会被提供和解析,所以在开始之前你就遇到了问题。

You could circumvent this by programmatically hiding the content, and then triggering a "show" of it when the image is loaded.

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

ie:

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

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

#2

If you have all content inside a container, you can probably come pretty close using this techique. It will also fail gracefully if javascript is disabled/unavailable.

如果你有一个容器内的所有内容,你可能会非常接近使用这种技术。如果javascript被禁用/不可用,它也将优雅地失败。

So if you have to do this because of a manager or something, this is the method I would use.

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

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

If you have very little content, however, it probably won't do much good. You could of course add a timer on the second javascript block, to delay it for a second or so :P

但是,如果你的内容很少,它可能不会有太大的好处。您当然可以在第二个javascript块上添加一个计时器,将其延迟一秒左右:P

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

#4

A possible way, if you don't want to rely on JavaScript, is to make a dummy page with only the background image. After a few seconds, it redirects to the real page, and the background will load quickly because it is already in cache.

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

Not a super attractive solution, if the timing is fixed, I reckon.
Note that 300KB is quite big for a background image. I have seen worse, somebody using a 1MB image: even with a relatively fast connexion, I could see the background load way after the elements of the page.

我认为,如果计时是固定的,那么这不是一个极具吸引力的解决方案。请注意,300KB对于背景图像来说非常大。我看到更糟糕的是,有人使用1MB图像:即使连接速度相对较快,我也可以在页面元素之后看到背景加载方式。

#5

I think the only way you'll be able to do this is with javascript - Send the user HTML that only contains your background image and some javascript that either waits for a certain amount of time before displaying the rest of the content or uses AJAX to retrieve the rest of the content (essentially the same thing).

我认为你能够做到这一点的唯一方法是使用javascript - 发送用户HTML只包含你的背景图片和一些javascript,它们在显示其余内容或使用AJAX之前等待一段时间检索其余内容(基本上是同一件事)。

#6

You could load the image within the page as a base64 image then it will already be loaded with the page.

您可以将页面中的图像作为base64图像加载,然后它就已经加载了页面。

#1