資源描述：
《用html5實現(xiàn)ipad應用無限平滑滾動》由會員上傳分享，免費在線閱讀，更多相關內容在應用文檔-天天文庫。
1、用HTML5實現(xiàn)iPad應用無限平滑滾動前言：LinkedIn5月2日發(fā)布了新的iPad版本，它基于HTML5制作，在體驗和界面上非常出色，在使用中可以發(fā)現(xiàn)它和原生應用基本沒有任何差別。關于這個版本，有兩篇文章非常有價值，深入的介紹了MobileWebApp和HTML5移動開發(fā)的原理和方法。第一篇《你絕對想不到的LinkedIn如何構建iPad新應用》主要包括三個方面的內容：·LinkedInandthemobilewebLinkedIn開始越來越多的采用HTML5來開發(fā)移動Web應用?！ow,withmoreNode.js大量使用了node.js。·“Responsivedes
2、ign”justdoesn’twork他們認為響應式網(wǎng)頁設計對簡單的、一次性的網(wǎng)站很有用，但是對應用或者社交網(wǎng)絡來說，它沒有那么好。--------------------------------華麗的分隔線而下面一篇文章講述了LinkedIn是如何使用HTML5在iOS中實現(xiàn)平滑無限滾動以及內存和性能優(yōu)化的。LinkedIniPad版：用HTML5的5項技術實現(xiàn)無限平滑滾動作者：TrunalBhanse譯者：蔣宇捷這是在一系列博客文章中的第二篇，我們將聊聊LinkedIn新的iPad應用。在第一篇文章中，我們談到了如何使用HTML5本地存儲建立敏捷的移動體驗，而這篇文章我要講講當
3、實現(xiàn)一個無限翻頁的列表時所面臨的挑戰(zhàn)。什么是“流”？當iPad項目開始時，我們考慮過如何才能為用戶創(chuàng)造一個引人入勝的內容消費體驗。我們決定以“流”的方式來展示文章、網(wǎng)絡更新，以及其他類似的內容：一個可以無限翻頁的界面。這里是頁面流的第一頁：移動設備上無限列表的挑戰(zhàn)和臺式機相比，移動設備具有更少的內存和更低的CPU主頻。如果在HTML頁面中渲染很長的列表，你會面臨運行設備崩潰的危險。這使得在移動設備上構建大型的HTML5互動應用成為一個挑戰(zhàn)。Native技術提供了UITableViewController來建立長的，無限滾動的列表。UITableView包含可復用的UITableVi
4、ewCells來優(yōu)化內存，性能以及響應。而針對HTML5我們沒有任何現(xiàn)成解決方案。因此，我們將自己實現(xiàn)一個！技巧1：移除圖像UIWebView或者移動Safari瀏覽器對圖像有嚴格限制。我們的頁面流里鋪滿了大尺寸圖像，所以很快就會達到上限。一種選擇是使用HTML5Canvas繪制圖像，不會帶來內存問題。然而我們發(fā)現(xiàn)在畫布上繪制非常大的圖像相當緩慢，所以我們不得不采取另一種方法：當一副圖像完全“流”出屏幕時，用另一副非常小的圖像替換img標簽的“SRC”屬性。這能確保渲染大型圖像所使用的內存被定期釋放。此外，我們保證并沒有引入圖像空src屬性的錯誤。技巧2：隱藏頁面釋放圖像并沒有回收
5、足夠的內存來防止崩潰。因此，我們開始通過將CSS的visibility屬性設置為hidden來隱藏流的獨立頁面（圖2表示“隱藏”的頁面）。經(jīng)過這種調整，我們不僅看到了更多的內存被回收（這樣應用程序就不會崩潰），而且渲染速度也更快，因為瀏覽器不會為界面上“隱藏”的頁面進行繪制。技巧3：刪除頁面采用隱藏的頁面可以覆蓋80％的情況。但是余下的20％仍然會導致應用程序崩潰！我們更進一步，開始刪除不需要的頁面。作為副作用，如果我們刪除當前頁面左側的頁面，頁面流會左移，而用戶將失去所在位置。為了保持滾動位置，我們不得不在移除頁面時（即DOM節(jié)點）用同樣高度和寬度的空白頁面來取代（圖2中示意的“
6、占位符”）。例如，如果用戶正在瀏覽第5頁，我們刪除第0頁，并用占位符取而代之。采用了上述的3種技術，我們的流開始類似于下面圖里的樣子。正如你可以在圖1中看到的一樣，如果用戶正在查看第3頁，前一頁和后一頁將完全加載。而當用戶決定向前或者向后翻頁時，他可以看到完全呈現(xiàn)的頁面。當用戶試圖滾動時，我們開始加載圖像并渲染頁面。它可以在iPad模擬器上完美運行，但在實際設備上，你可以看到滾動性能的下降。圖1圖2正如圖2所示，當用戶翻動到第5頁，第0和第1頁將會被刪除，第2頁將會隱藏，而第3頁移除了所有圖像。此時，用戶可以繼續(xù)向前翻頁，其它頁面將根據(jù)它們和可見頁面之間的距離來決定是移除圖像、隱藏
7、還是刪除自身。我們不得不為不同版本的iPad使用一個可變大小的“窗口”。例如，iPad1內存最少，所以我們不得不給它一個非常小的窗口：getConfig:function(){//默認設置varconfig={size:3,maxVisibleOnOneSide:1,};//根據(jù)設備更新設置if($isDesktop
8、
9、$native.isNative()&&$os.ipad){//檢測是ipad1還是ipad2if($isDesktop
10、
11、$native.getDe
