FadeIn像Facebook一樣的圖像（如果沒有完全加載，顯示它模糊）

我寧願先顯示圖片模糊，如果它完全加載完整。

Facebook就是一個很好的例子。

這種技術是如何工作的？

我認爲它可能只是逐步加載jpegs？ – Darkzaelus

這可能有所幫助：http://www.codinghorror.com/blog/2005/12/progressive-image-rendering.html我很確定這是在圖像層面完成的，而不是javascript級別 – Darkzaelus

這取決於該圖像是保存在格式。從頂部

JPG圖像正常負載（且因此顯示）至底部。然而，如果它們以漸進式（也稱爲隔行掃描）格式存儲，則它們將以顆粒狀格式加載整個圖像並逐漸提高質量。 Facebook以漸進格式保存圖像。

有工具可用於從第一種格式轉換爲第二種格式。這裏是一個着名的（ImageMagick）的鏈接：ImageMagick

2012-12-30 10:14:00

好的謝謝，我將嘗試我應該如何顯示圖像與jQuery？實際上我使用.load，這是行不通的，我認爲 – CaptainGerrard8

是的.load可能不會顯示效果，因爲它將所有圖像加載到位之前加載。如果圖像在渲染時下載，您只能看到效果。因此，例如，您可以將一個img標籤添加到頁面的相應部分。 –

還值得注意的是，如果圖像是從瀏覽器緩存中加載的，則不會產生效果。只有當它通過網絡加載（相對較慢）。這就是爲什麼你只能在第一次加載圖像時在Facebook上看到它。 –

你只有兩個圖像：質量差，質量好和。想要顯示圖像時，首先將image.src設置爲質量較差的圖像，然後立即將圖像路徑設置爲良好（帶有0延遲的setTimeout也可以）。

它的工作原理是，因爲瀏覽器不會替換img標籤中的圖像，直到完全加載。質量差的圖像加載速度會比好的圖像加快得多，因此用戶在加載時將首先看到模糊圖像和滿載圖像。

例

img.src = 'path/to/fuzzyImage.jpg'; 
setTimeout(function() { 
    img.src = 'path/to/fullImage.jpg'; 
}, 0);

2012-12-30 10:23:36

這種方法存在每個圖像需要兩個HTTP請求的問題。如果頁面上有多個圖像，這將會降低性能。 – Darkzaelus

通常的做法是設置寬度和高度上的圖像的縮略圖版本的大圖像的全尺寸，並且大一個被裝載時與完全圖像替換的縮略圖。當您在縮略圖上設置完整尺寸時，由於瀏覽器將其插入到較大的尺寸，因此它會變得「模糊」。

2012-12-30 14:04:01 hayavuk

回答