同位素過濾可以處理幾百個項目和多個類別嗎？

我希望能夠使用Isotope Jquery插件（http://isotope.metafizzy.co/）來顯示和過濾幾百個項目（大約700）。每個項目將包含一個縮略圖圖像和一個名稱，並可以通過三個類別進行過濾。（要停止頁面的可笑長度，整個事情將被包含在一個可滾動的div內）。同位素過濾可以處理幾百個項目和多個類別嗎？

如果可能，我想啓用動畫效果（使用'最佳可用'動畫引擎，如果CSS3轉換不可用，它將回退JS。

我在本地測試了大約100個項目，它在Chrome中執行得非常快，CSS3和JS動畫都非常快。但是我擔心在野外，對於年齡較大的客戶和瀏覽器來說，這可能會慢得無法緩慢（當然，由於時間緊迫，所以沒有多少時間來構建更好的原型！）。

有沒有人有類似的規模使用它的經驗？

謝謝

彼得

來源

2011-04-25 poshaughnessy

只是爲了更多的背景知識，我應該提到它需要在IE7上對幾年前的Win XP機器（即類型的客戶端，仍然有大量的），但我們並不需要擔心IE6（或更早）。無論如何，我只是真的希望任何人以前的經驗，或我可以看看的例子，我可以自己確定速度。謝謝。 – poshaughnessy 2011-04-25 23:13:10

好的好，我現在可以回答我的問題，因爲我們試圖建立它。答案是，除了Chrome之外，幾乎所有瀏覽器的速度都非常慢，因爲它幾乎可以接受。即使在Mac電腦上的Firefox上，從頭開始加載頁面花費大約5秒鐘的時間，並沒有比將濾鏡更改爲「全部」更少。它甚至給一些在Safari和IE中檢查過的人提供了無響應的腳本警告。

所以我重寫它只是簡單地添加/刪除每個項目上的'隱藏'類。從快速比較來看，這大約快50％左右。顯然這會失去所有幻想動畫。所以我會推薦同位素用於時髦視覺效果很重要的較小數據集，但不適用於數百個項目。

來源

2011-04-27 22:13:41 poshaughnessy

你不必重寫任何東西......傳遞一個選項：$ .isotope（{animationEngine：'css'}） – 2012-04-30 05:41:22

如果您正在進行過濾或排序，我建議您的物品數量最多應爲50個物品。這並不意味着你可以嘗試推動它。例如，Leafly的產品數量接近300.

來源

2011-05-24 13:06:11 desandro

同位素過濾可以處理幾百個項目和多個類別嗎？

回答

相關問題