如何确保在页面加载之前显示背景图像？
[英]How can I make sure a background image displays before the page loads?
问题描述
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
3 已采纳 2008-10-14 10:34:16
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
3 2008-10-14 10:45:45
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
2 2008-10-14 11:14:20
<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
1 2008-10-14 11:26:16
A possible way, if you don't want to rely on JavaScript, is to make a dummy page with only the background image. 如果您不想依靠JavaScript，则可能的方法是制作仅包含背景图像的虚拟页面。 After a few seconds, it redirects to the real page, and the background will load quickly because it is already in cache. 几秒钟后，它将重定向到实际页面，并且后台将很快加载，因为它已经在缓存中。
Not a super attractive solution, if the timing is fixed, I reckon. 我认为这不是一个超级有吸引力的解决方案，如果时机固定的话。
Note that 300KB is quite big for a background image. 请注意，对于背景图片，300KB很大。 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. 我看到的情况更糟，有人使用的是1MB的图像：即使连接速度相对较快，我也可以在页面元素之后看到背景加载方式。
解决方案5
0 2008-10-14 10:34:50
我认为您唯一能够做到这一点的方法就是使用javascript-向用户HTML发送仅包含背景图片和一些javascript的javascript，这些javascript需要等待一段时间才能显示其余内容，或者使用AJAX来检索其余内容（基本上是同一件事）。
解决方案6
0 2016-07-02 01:29:26
您可以将页面内的图像作为base64图像加载，然后该图像将随页面一起加载。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.