Javascript庫性能

我正在創建帶拖動功能的圖像庫（如iPhone）。它從HTML DIV（超過15幅圖像可能）獲取數據：Javascript庫性能

<div class="mySlideshow"> 
    <img src="img1.jpg"/> 
    <img src="img2.jpg"/> 
    <img src="img3.jpg"/>  
    ... 
    <img src="img15.jpg"/> 
</div>

現在我看到兩種方式如何創建它（過渡使用拖放）：
- 創建15個div的背景圖像和所有他們展示作爲一個大條。

enter image description here

- 創建3 DIV的容器和過渡完成後改變自己的background-image屬性和位置。

enter image description here

是什麼造成這種畫廊的最佳方式？

來源

2011-07-05 Dmitry Semenov

如果您擔心性能問題，可以預加載下一對「隱藏」圖像，而不是在頁面加載時加載所有圖像，如this。

但是，您的問題似乎指向您認爲上述兩種方法中的哪一種最好。我認爲第一個會更好，但我不知道爲什麼要在頁面上使用背景圖像而不是靜態圖像？除非我誤解了你如何使用術語「背景圖像」。將所有圖像放在一個div上並滾動它們可能會更順暢。在語義上，你可以使用列表而不是div。

來源

2011-07-05 10:09:34 Alex

謝謝，你幫了很多。我是Android/iOS程序員，所以我不明白瀏覽器渲染的工作原理。所以我使用div，因爲我看到Nivo滑塊使用它們。但如果你說使用圖像應該更好，我會使用它們。 –

如果您想要以更多代碼爲代價來最小化帶寬使用，請使用第二個。如果您不介意帶寬，請使用第一個，但由於您提到的超過15個，這可能不是最佳選擇。

來源

2011-07-05 10:14:59

第一種方法（加載所有圖像）可能有助於防止repaints an reflows，但拖動轉換的代碼將會更多地影響性能。看看jcarousellite上的代碼 - 它對我來說總是很快。

來源

2011-07-05 10:44:39 koby

感謝您的回答和關於渲染的精彩文章。 –

Javascript庫性能

回答

相關問題