jCarousel帶縮略圖的圖片庫

Question

我目前有一個包含30-40張圖片的圖片庫。在頁面加載時，用戶可以直觀地看到加載圖像的時間相當長（不夠漂亮）。畫廊使用jcarousel上一頁/下一頁按鈕導航到圖像以及縮略圖。我正在尋找方法來優化圖庫加載的方式或至少展示圖庫加載的外觀。有一個想法是在下面，但想知道堆棧溢出社區的想法是如何解決這個問題的最佳途徑。

• 我應該加載第一張圖片和縮略圖，然後根據要求加載圖片嗎？

預先感謝您！

Answer 1

我們在我們的網站執行了以下操作。

1. 當你構建旋轉木馬，不建全與圖像
2. 對於前四個或五個圖像對SRC圖像爲下所有圖像存儲屬性
3. SRC值圖像在一些自定義值圖像的ValVue並給SRC其他一些虛擬值
4. 一旦你在暢飲掉點擊下一步SRC和自定義變量的值
5. 加載就可以顯示一個默認加載符號
6. 可以提高性能的方法這種方法

例如更符合暢飲所有你的下一個圖像應該是這個樣子

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" id="yourimage.jpg" class="carouselImage"> 

一旦你點擊交換圖片src

$('yourimage').attr('src','yourimage'); 

之後您的代碼應該看起來如下

<img height="0px" width="0px" border="0" alt="Hidden Depths" title="Hidden Depths" src="yourimage.jpg" class="carouselImage"> 

Answer 2

是的，延遲加載圖像是非常整潔的技術來提高性能。你應該展示一些（取決於尺寸）。隨後的jCarousel具有動態加載圖片的休息方式：

jQuery('#mycarousel').jcarousel({ 
    itemLoadCallback: mycarousel_itemLoadCallback 
}); 

可以定義回調加載通過JavaScript或通過AJAX新的圖像。 見的例子：http://sorgalla.com/projects/jcarousel/#Examples

而且我知道這個插件http://www.appelsiini.net/projects/lazyload懶惰，負載滾動時，與SRC屬性打球，科比提出的圖像。它不適合你的情況，但源代碼會給你一個更好的實現它的想法。