如何確保在加載頁面之前顯示背景圖片？

有沒有辦法確保（大，300K）背景圖片始終顯示在頁面上顯示任何其他內容之前？如何確保在加載頁面之前顯示背景圖片？

在服務器上我們可以訪問PHP。

2008-10-14 Edward Tanguay

我建議讓圖像更小，300k對於網站imo的背景來說相當大。 – 2008-10-14 11:20:36

所有的html內容在它開始獲取圖像之前都會被提供並解析，因此在開始之前您有一個問題。

您可以通過編程方式隱藏內容來避開這種情況，然後在圖像加載時觸發其「顯示」。

即：

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

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

來源

2008-10-14 10:34:16

第一句話是不準確的。即使在完全收到初始HTML資源之前，瀏覽器也可能開始下載甚至完成下載其他所需資源。還請注意，該問題涉及背景圖像而不是圖像元素。 – AnthonyWJones 2008-10-14 11:47:24

我想你就可以做到這一點的唯一方法是用JavaScript - 發送一個只包含背景圖像的用戶HTML和一些JavaScript，要麼等待一定量在顯示其餘內容或使用AJAX檢索其餘內容（基本上是同一件事）之前。

來源

2008-10-14 10:34:50

如果您擁有一個容器內的所有內容，那麼使用此技術可能會非常接近。如果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

來源

2008-10-14 10:45:45 gnud

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

來源

2008-10-14 11:14:20 kentaromiura

一種可能的方法，如果你不希望依賴於JavaScript，是使一個只有背景圖像的虛擬頁面。幾秒鐘後，它重定向到實際頁面，後臺將快速加載，因爲它已經在緩存中。

不是一個超有吸引力的解決方案，如果時間是固定的，我認爲。
請注意，300KB對於背景圖像來說相當大。我看到更糟糕的是，有人使用1MB圖像：即使是相對較快的連接，我也可以看到頁面元素後面的背景加載方式。

來源

2008-10-14 11:26:16 PhiLho

您可以將頁面中的圖像作爲base64圖像加載，然後它將已加載該頁面。

來源

2016-07-02 01:29:26

如何確保在加載頁面之前顯示背景圖片？

回答

相關問題