如何確保在頁面加載之前顯示背景圖像？
[英]How can I make sure a background image displays before the page loads?
問題描述
有沒有辦法確保在頁面上顯示任何其他內容之前始終先顯示（大300K）背景圖片？
在服務器上，我們可以訪問PHP。
6 個解決方案
解決方案1
3 已采納 2008-10-14 10:34:16
所有html內容都將在開始獲取圖像之前被提供並解析，因此在開始之前會遇到問題。
您可以通過以編程方式隱藏內容，然后在加載圖像時觸發內容的“顯示”來規避此問題。
即：
<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
如果您將所有內容都放在一個容器中，則使用此技術可能會非常接近。 如果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
解決方案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
如果您不想依靠JavaScript，則可能的方法是制作僅包含背景圖像的虛擬頁面。 幾秒鍾后，它將重定向到實際頁面，並且后台將很快加載，因為它已經在緩存中。
我認為這不是一個超級有吸引力的解決方案，如果時機固定的話。
請注意，對於背景圖片，300KB很大。 我看到的情況更糟，有人使用的是1MB的圖像：即使連接速度相對較快，我也可以在頁面元素之后看到背景加載方式。
解決方案5
0 2008-10-14 10:34:50
我認為您唯一能夠做到這一點的方法就是使用javascript-向用戶HTML發送僅包含背景圖片和一些javascript的javascript，這些javascript需要等待一段時間才能顯示其余內容，或者使用AJAX來檢索其余內容（基本上是同一件事）。
解決方案6
0 2016-07-02 01:29:26
您可以將頁面內的圖像作為base64圖像加載，然后該圖像將隨頁面一起加載。
如何在最終用戶加載頁面之前不等待完成就執行PHP腳本？
[英]How can I execute a PHP script without waiting for completion before the page loads for the end user?
如何在頁面加載之前首先在 function 中運行 httprequest？
[英]How can I run a httprequest inside function first thing before page loads?
如何在表單提交之前確保用戶插入說明或文件？
[英]How can I make sure a user either inserted a description or file before form submission?
如何確保沒有登錄就無法訪問除登錄頁面之外的其他頁面？
[英]How do I make sure that no other page apart from login page can be accessed without logging in?
如何確保我的 PHP api 只能由特定的 javascript 頁面使用
[英]How can I make sure that my PHP api can only be used by a specific javascript page
php如何確保重新加載頁面並將echo更新為新值
[英]php how can I make sure the page is reloaded and the echo is updated to the new value
如何在打印時確保頁腳始終位於最后一頁的底部？
[英]How can I make sure that the footer will always be on the bottom of the last page when printing out?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.