我正在建立一個視差滾動網站（不是我們全部），除其他事項外，用戶滾動顯示圖像。圖像解碼時間從Chrome時間軸開發工具
我已經做了通過將背景圖像，並放置固體填充格在最前「泄露」。然後，根據滾動位置將該div從100％高度移動到0％高度，從而顯示背景圖像。
我做這種事情多次，遺憾的是我越來越慢了下來。
使用Chrome內置的時間軸功能，我可以看到，大部分的這種減緩是從圖像進行解碼。對於上面的顯示，它將每幀重新解碼圖像，每幀每個圖像需要22ms。
有誰知道什麼時候瀏覽器需要做解碼圖像，當它不？對我來說，如果我重新調整圖像的尺寸，似乎很明顯，但是當我只覆蓋一半圖像時不需要這樣做？
感謝您的幫助。
你如何給房產設置動畫？我認爲你可能有很多替代方法來調整高度（這是容器的某種調整大小）。
也許這只是「夾」與其他元素的背景圖像不夠密集。我在StackOverflow上發現了一個關於它的線索，提供了一些建議。如果您使用JavaScript動畫，不幸的是僞元素是沒辦法......
我這個問題也爭奪了不少。至今我還沒有找到具體的東西，我提出的解決方案似乎並不適用於所有情況，我也無法確定原因。
反正...
看來，當你在動畫圖像的頂部了堅實的元素，鍍鉻迫使圖像的重新編碼。
有兩件事我已經嘗試過，大部分都是成功的。
如果添加-webkit-transform : translate3d(0,0,0)到覆蓋元件，你會發現大多數，如果不是全部的圖像進行解碼消失。
如果將上述CSS到覆蓋元件本身沒有幫助，嘗試將其添加到圖像，而不是，或甚至嘗試將其添加到這兩個元素。
我的理解是，使用3d css屬性將圖像推入自己的複合圖層，該圖層由GPU而不是瀏覽器軟件渲染器進行緩存和處理。
90％的時間我發現上述組合之一成功。我希望它有幫助。
嗨Gordyr，謝謝你的迴應。我確實記得嘗試webkit轉換來讓GPU承受壓力，但我認爲這最終解決了我的問題 - 這可能是因爲初始化時間引起更多的頭痛，但說實話，我可以不太記得它爲什麼不起作用。最後，我使用各種不同的方法爲不同的項目工作得很好。在這裏它是在行動：http://www.patentise.com/ – 2013-06-20 12:43:40
很高興聽到你得到它排序:-)它的外觀和工程很好的方式。 – gordyr 2013-06-20 13:31:37
嗨Nirazul，我用javascript來設計覆蓋div的高度。我會看看剪輯方法是否有任何不同，並讓你知道。 – 2013-04-10 09:18:20
非常感謝Nirazul，我發現使用剪裁來隱藏圖像是一種比顯示更有效的方式：無，或者將圖像從屏幕上移開，或者將圖像大部分移出屏幕 - 因爲這樣做我得到在Chrome中觸發的圖片解碼數量少得多。然而，我沒有將這個問題標記爲真正的問題，因爲真正的問題是：「有人知道瀏覽器什麼時候需要進行圖像解碼，什麼時候不需要？」但你的回答非常有幫助，所以謝謝你。 – 2013-04-10 17:03:39