在Android平板電腦上更新元素位置的最快JavaScript方法（os 3.0+）

在Web瀏覽器中，我嘗試從左至右平移圖像，如全景圖。在Android平板電腦上更新元素位置的最快JavaScript方法（os 3.0+）

我使用jQuerymobile和vmousedown，vmousemove和vmouseup其歸一化的事件來檢測用戶觸摸瀏覽器。我想移動左右觸摸的圖像以平滑地觀看全景。

所有3個事件都正常工作。我跟蹤發生的vmousemove事件的數量，幾乎與桌面一樣多。每當vmousemove事件觸發時，我都會更新圖像位置。儘管看到事件發生數十次和幾十次，但移動圖像的JavaScript不會按照預期每移動一次。它在桌面上，但不在Android平板電腦上。儘管有近30次移動事件發生，但圖像每秒移動大約2或3次。

我曾試圖與小圖像（黑白200x100）以及大型圖像（1380x550），並都只有我的Tegra 2雙核Android平板進行相同的差。

在移動機器人電話（HTC EVO 4G金魚草的1GHz）或ipad（1和2），其中您觸摸圖像平滑地移動。只有在華碩變壓器（最新的固件和操作系統），這是否會發生這種過度的沼澤。

有沒有人想通了，爲什麼DOM操作發生如此緩慢的默認瀏覽器在Android平板電腦上運行3.x的？

我已經使用預先定義JS參照對象操縱$（OBJ）的CSS（「左」，「XXX」）;和obj.style.left ='### px';而且表現都不好。我試圖弄清楚爲什麼表現糟透了。想法？

來源

2011-09-07 JLaw

在移動設備上（Android，iOS設備黑莓）周圍移動的東西最快方法是通過使用2D CSS3變換。我在this blogpost（但是它是荷蘭語:-)）中描述了這一點。我花了兩週時間做了很多實驗（帆布，普通的DOM，CSS等等），但結果在所有現代移動設備上都非常流暢。我們將它用於我們的mobile site上的照片庫。

這基本上是讓感動的事情順利在所有設備上的唯一方法：

scroller.self.css({ 
     '-webkit-transform': 'translate3d(' + -x + 'px,0px,0px)', 
     '-webkit-transition-duration': '0ms', 
     '-webkit-backface-visibility': 'hidden', 
     '-webkit-transition-property': '-webkit-transform' 
    });

來源

2011-09-07 18:03:02

事實上，我在網上發現並確實測試了在iPad 1上最快的方法是使用3d transofrms。是的......使用z總是爲零的3d翻譯比使用2d翻譯更順暢。我可以認爲沒有合理的理由，但事實依然存在。 – 6502

我們能否看到一些示例代碼？ – JLaw

@ 6502，你是完全正確的。我後來將其更改爲transform-3d，但未改變我的博客文章。我們的移動網站的鏈接使用3d轉換，所以有一些示例代碼。 –

月Jongboom的代碼確實工作更加順暢，但會導致對我的變壓器片撕裂的未揭露的左側和右側，如果我使用translate3d（）。沒有撕裂，如果我使用2D，它看起來工作相同。也許嗅探設備並相應地調整。

來源

2011-09-07 20:35:07 omi

在Android平板電腦上更新元素位置的最快JavaScript方法（os 3.0+）

回答

相關問題