加載大型圖片庫的最佳做法

Question

我有一個意外大的130張圖片。最初，我的方法是在畫廊褪色$(window).load();

顯然這是可笑的130文件..真的，沒有人想要處理這麼多的http請求無論如何。

這就是我的「可能會被關閉的主觀問題」。

我不情願地認爲，也許我應該加載只有20左右的圖像，然後阿賈克斯在更多的用戶進展的畫廊。但這是未知的，可怕的聲音。

感謝您的諮詢！

Answer 1

首先加載一些圖片，然後使用其他圖像預加載..

常見的jQuery畫廊做這個找gallerific： http://www.twospy.com/galleriffic/

如果你想建立的解決方案手動你可以使用預加載： http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Answer 2

根據用戶的需求，只需載入I個年齡段，或者一次只顯示10-20個頁面上的「查看更多」或「下一頁」鏈接將是一個好主意。另一種做法是在用戶向下滾動頁面時加載圖像！使用滾動（）方法，在這裏記錄：http://api.jquery.com/scroll/

我會去與單獨的網頁，從而使用jQuery加載下一組圖像，當用戶點擊不同的鏈接。

Answer 3

Definetly最好的方法是你寫，只加載一些圖像，然後加載其餘的。

我的建議是隻加載3-5張圖片，並添加「下一步」按鈕的事件來加載更多。找到jquery.lazyload.js並嘗試整合到您的頁面。

Answer 4

這是一個主觀的問題，但是，基本的答案是加載後的頁面加載圖像，這樣就不會擋住頁面。

您還應該使用縮略圖。我見過很多自制的畫廊，只是將原始圖片壓縮到縮略圖上;這並不好;）如果您不想進入下一個/上一頁的路線，您可以加載縮略圖在5/6/7-by-infinite網格中，並且只加載可見佔位符中的圖片。

1. 加載頁面
2. 爲每個圖片創建佔位符
3. 可見佔位符
4. 爲用戶向下滾動頁面加載圖片，加載圖片，該進來的視口中的佔位符。

還是什麼;）