Fotorama - 如何在使用CSS Sprites時生成縮略圖？

我使用http://fotorama.io/來製作幻燈片，並且由於imgs的數量增加了我的頁面加載時間。Fotorama - 如何在使用CSS Sprites時生成縮略圖？

Fotorama可以從您的圖像自動生成縮略圖。爲了幫助加載速度，我將這些圖像組合成一個CSS sprite。它似乎需要一個「img」標籤來生成縮略圖。

有關如何在不使用「img」標籤時顯示拇指的任何想法？

2013-12-16 davidmkendall

也許有點老問題，但here是一個使用<div style='background: url()'>拇指的小提琴。它不使用精靈，但如果你知道如何做精靈，這是一個簡單的步驟。只需將.thumbs a div { background: url(myimage.jpg);}添加到您的CSS和background-position:-30px -150px;等到每個div。

代碼從custom-thumbs示例複製，只有css被更改爲樣式div而不是img。

順便說一句：謝謝你介紹我fotorama，這基本上是我只是編碼的畫廊。除了css-sprites。

如果你需要任何關於精靈的幫助，我做了一個小型的js庫和shell腳本來自動生成精靈和圖像文件夾的代碼。

來源

2014-07-09 07:39:48 Mathias

我需要使用精靈，因爲我有一個150圖像左右的頁面。它導致我有一個可怕的頁面加載時間。你能否指出我正確的方向來解決這個問題？我必須顯示所有的圖像。 –

圖像只是縮略圖還是更大？縮略圖可以合併成一個包含所有圖像的較大圖像，然後用CSS'background-position'處理。這大大減少了請求開銷。如果它們是全尺寸圖像，那麼除了將視頻填充到僅限i幀的視頻並使用視頻播放器來顯示它們之外，沒有什麼可以做的。你甚至使用Fotorama？你可能應該打開一個新的問題（也許給我一個ping）。 – Mathias

Fotorama - 如何在使用CSS Sprites時生成縮略圖？

回答

相關問題