Javascript圖像加載Facebook風格

所以我在瀏覽此頁面時：http://360langstrasse.sf.tv/ 它基本上是一個Javascript的街景，但只允許一個方向。因此它有點像玩電影。當我快速移動時，我發現圖像有顆粒感/像素化，就像瀏覽Facebook時一樣。Javascript圖像加載Facebook風格

我想知道如何實現這個？我嘗試在標記中發送小型base64編碼圖像，然後在畫布上繪製直到加載「真實」圖像。

這工作得很好，但留給我想，如果這確實會提高性能，或像Facebook這樣的網站做不同？

在此先感謝您的幫助。

關心Jens

編輯：或者他們只顯示不同的圖像？有比平常更多的渲染過程嗎？因爲我沒有看到任何小圖像beeing加載？

編輯2：首先下載小圖片的下面提到的選項在這裏描述得很好：http://www.phpied.com/picassa-progressive-image-rendering/ 但基本上它很簡單。

2011-09-28 JavaJens

我想緩存（頁內）壞分辨率的圖像和更好的提取是一個真正的方法來實現這一點。

另一種方式是以普通的方式鏈接到小圖像，並用JS獲取更大的圖像 - 小圖像加載速度非常快，或者您可以訂閱它們的加載事件（在IE中很棘手）並顯示頁面（刪除一些疊加）一旦被加載。

BTW，而不是使用畫布，你可以把的base64直接進入src

<img src="data:image/png;base64,...

2011-09-28 08:36:15 Guard

這就是我想到的方式，加載小圖像，並停在一個單一的圖像加載較大的一個，但至少在上面的鏈接，我沒有看到任何thubmnail圖像beeing加載。如果他們先加載小圖片，我會在Facebook上查看。感謝base64提示。 – JavaJens

我也認爲這種效果可以通過像JPEG2000這樣的適當的img格式來實現（儘管這種特殊的格式並沒有被瀏覽器廣泛支持） – Guard

正如你所說的，JPEG2000並沒有廣泛傳播，但讓我想到他們是否使用了一種稱爲漸進式解碼。我會看到試圖獲得任何信息，如果Facebook做到這一點，以及他們如何在瀏覽器或JavaScript中做到這一點。 – JavaJens

答案是漸進式JPEG的！例如，一個用imagemagick創建。通過這種方式，瀏覽器逐漸呈現，直到中止或完成。這些圖像可能比正常圖像大，但並非總是如此。此外，它們提供在完全下載之前看到的能力。

感謝您的幫助！

2011-09-29 15:40:15 JavaJens

回答