如何將圖像加載到瀏覽器中？

我有一個圖片的原始大小假設1024px x 768px。當我通過CSS背景屬性的網站加載它，我會做到這一點的方法：如何將圖像加載到瀏覽器中？

background: url('imgPath') no-repeat; width: 100px; height: 100px;
background: url('imgPath') no-repeat; width: 1024px; height: 768px;

我已經在我的腦海簡單的問題：難道這兩種風格加載頁面時相同的速度或第一種方法以更高的速度加載頁面？

2013-08-18 Bhojendra Nepal

沒有，都具有相同的圖像名稱（文件路徑）。圖像大小將相同。所以這意味着無論大小如何，都必須下載圖像。其次，你正在使用寬度：;高度：;這將縮放圖像。所以這也需要一些時間;在瀏覽器中縮放圖像！但是，我真的不想擔心這一點。但是，如果您正在爲移動網站工作。 2G是電話。那麼你應該考慮使用這些。您可能需要具有確切大小的圖像，因爲屏幕可以節省時間。但沒有必要在WEB（桌面）上。 –

在這兩種情況下，完整的圖像必須由客戶端下載，因此加載時間將是相等的。

如果你真的關心：以後的第一個圖像將顯示幾微秒，因爲它需要將它呈現給用戶之前，首先重新調整。

取決於如果您使用服務器端腳本技術，你可以重新調整和緩存服務器上重新縮放圖像。例如：imageurl可能看起來像background.jpg?size=100x100，其中background.jpg實際上重定向到腳本頁面，該腳本頁面從緩存生成或加載以所需大小生成的圖像。

來源

2013-08-18 05:08:30

假設「imgPath」是兩個圖像是相同的，都將加載在同一時間，因爲好...它應該只加載一次。看起來你的想法是寬度和高度可能會影響圖像的加載方式，而事實並非如此。如果你希望你的高度和寬度縮放圖像

background-size: 100% 100%;

：

http://jsfiddle.net/ericjbasti/AKGB5/

你也可能意味着要做到這一點。

來源

2013-08-18 05:43:21 ericjbasti

我會是相同的，整個圖像在這兩種情況下加載，因爲CSS適用於客戶端。「加速」加載時間的唯一方法是在服務器端減少圖像。

在這種情況下，我會說，你最好使用縮略圖，否則你會浪費寶貴的服務器資源。

來源

2013-08-18 05:59:45 federicot

正如其他人所說，這將是相同的速度。你總是可以嘗試媒體查詢是這樣的：

@media all and (min-width: 601px) { 
    html { 
    background: url('imgPath') no-repeat; width: 1024px; height: 768px; 
    } 

    } 

    @media all and (max-width: 600px) { 
    html { 
    background: url('imgPath') no-repeat; width: 100px; height: 100px; 
    } 
    }

下面是關於它的一個非常好的文章：http://timkadlec.com/2012/04/media-query-asset-downloading-results/

來源

2013-08-18 06:51:01 eshellborn

如何將圖像加載到瀏覽器中？

回答

相關問題