Facebook like image viewing

Question

我一直想知道Facebook如何加載圖像如此之快。 我不在任何與我的問題有關的項目，但我真的很感興趣。

有一些觀察，我注意到Facebook將低質量圖片加載爲臨時圖片，並在滿載時立即顯示高質量圖片。 這使得它看起來像加載它如此之快，但實際上它起初只是一個低質量的。

我的問題是，Facebook如何實現？ 當我將圖像放在我的網站上時，它會以完全質量從上到下加載它。

這是通過Javascript/Jquery ajax完成的嗎？或者其他的東西？ 是通過php完成的？

Facebook做了到他們的版本？低和高質量？並首先發送低質量的？

謝謝:)

Answer 1

是的！您是對的，Facbook首先加載低質量圖像，然後根據網絡速度進行渲染。這種稱爲「Progressive JPEGs」的方法是另一種類型的JPEG，它們如其名稱所暗示的那樣逐漸呈現。

首先你會看到整個圖像的低質量版本。然後，隨着越來越多的圖像信息通過網絡傳播，質量逐漸提高。

從可用性的角度來看，漸進式通常是很好的，因爲用戶可以獲得有關事情正在進行的反饋。此外，如果您的連接速度較慢，則漸進式JPEG格式更適合您，因爲您無需等待整個圖像到達，以便根據需要獲得想法。如果沒有，您可以點擊離開頁面或點擊後退按鈕，而無需等待（可能較大）高質量圖像。

博客和書籍中存在有爭議的信息，無論漸進式JPEG文件大小是否比基準JPEG大或小。

如果您使用像Photoshop或任何設計工具的工具，同時保存任何文件的JPG或其他格式它會問你2選項一是基線和另一個是進步。

但是，如果您已經編寫了任何API以將您的基準圖像轉換爲漸進圖像並顯示在網頁上，則在運行時也可以達到同樣的效果。

Answer 2

從我的理解，當你點擊來自Facebook的UI圖像上，觀衆似乎與低版本的縮略圖（或縮略圖稍大的版本）加載。由於瀏覽器緩存，該低質量圖像將很快顯示。

然後在後臺，他們使用JavaScript來加載更高質量的圖像。然後使用一些JavaScript事件，他們可以檢測何時加載了更高質量的圖像。一旦加載，用較高質量的版本替換較低版本的版本。

所以從UI的角度來看，它只是Javascript。當您上傳照片時，他們會創建多種尺寸的圖片以實現此效果。