CSS - 使用大圖像作爲背景（性能）

我對網站性能有疑問。我有4個大圖像（1920 * 500px），需要在主頁上顯示某種滑塊 - 用戶需要單擊以顯示下一個圖像，這不是幻燈片放映。加載主頁時，只看到第一張圖像，只有在用戶請求時才能看到其餘圖像。我的問題是接下來的。創建一個大圖像（精靈）是否聰明，並將其作爲背景（該圖像的焦點集中在centar上，並且具有支持該分辨率的顯示的用戶可以看到該圖像，那些沒有這種類型的用戶顯示器會盡可能多地看到）或者使用標準標籤，或者有更好的方法來實現這一點？CSS - 使用大圖像作爲背景（性能）

來源

2012-12-19 Sasha

使用精靈的好處是，你要保存的HTTP請求和預載圖片（這是響應圖像翻轉必不可少的，例如）。

就你而言，我認爲精靈沒有任何意義。首先，您只保存了三個http請求（第一張圖片大概在您加載頁面時可見），並且您迫使每個訪問者下載這些大圖片，即使他們不會看到它們。

來源

2012-12-19 00:57:41

那麼，這就是我的想法，但如果我使用** img **標籤，它就會出現同樣的情況 - 所有圖像都會在一次加載。其次，如果用戶使用分辨率小於1920px的顯示器，我該如何剪切圖像？這對於背景來說會相對容易，但用戶需要再次加載一個大精靈。 – Sasha

使用不同背景圖像的多個div，或使用javascript更改單個div的背景圖像 - 不要使用精靈。 –

我想這將是最好的辦法。我可以爲不在頁面末尾顯示的div制定規則，並且不會讓用戶等待。感謝這個想法:) – Sasha

林不知道我明白你的要求，但如果你總是渲染其中一個圖像，那麼創建一個像這樣的全屏幕背景圖像可能是明智的。你也可以用JS更改背景圖片，必要時

<style> 
html 
{ 
    background: url("your image") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    opacity:1; 
} 
</style>

來源

2012-12-19 00:52:21

這是個好主意。我會嘗試。 – Sasha

用jQuery改變類。

.bg-1 { background: url("your image") no-repeat center center fixed; } 
.bg-2 { background: url("your image 2") no-repeat center center fixed; } 
.bg-3 { background: url("your image 3") no-repeat center center fixed; }

來源

2012-12-19 01:29:12

CSS - 使用大圖像作爲背景（性能）

回答

相關問題