縮小圖像在Chrome中速度很慢

下面是我在做什麼： 1.裝載大型圖像轉換成一個DIV。 2.縮放圖像以適應DIV的大小。 3.當瀏覽器調整大小時，圖像將隨瀏覽器一起放大和縮小。

一切都在瀏覽器以外的所有瀏覽器的工作100％。

我已經檢查在Chrome探查並沒有看到有什麼異常。這些都是大圖片，但是在所有其他瀏覽器中工作得很好（甚至是活的）。

我讀過一噸的在Chrome中使用尺寸減小的圖像時已經注意到這個問題的地方......但沒有解決方案。

什麼特別的，只是使用

var img=new Image(); 
$(img).load(function(){ .... {);

有誰知道解決方法或解決方案，將在Chrome工作的？謝謝！

來源

2013-04-17 Aaron

所以它出現，當涉及到處理大量圖片甚至圖像不在大，而只是按比例縮小的是Chrome瀏覽器只是吮吸。我無休止地搜索，只是爲了找到沒有解決方案的類似問題。

仍然不確定爲什麼所有其他瀏覽器（即使是IE 7和8）都可以處理大圖片（使用7mb縮小的PNG進行測試），但Chrome甚至無法實現700kb的縮小JPG而沒有滯後。

所以，我回答了這個問題：在這個例子中，Chrome很糟糕。

來源

2013-04-18 16:11:31 Aaron

不滿意報告此問題仍然存在。通過22k分辨率（700kb）直接加載tinypng'd圖像6k會在Chrome中造成恐怖，但在其他瀏覽器上可以平滑黃油。 – user3526

如何調整圖像大小？使用高度/寬度或CSS轉換？後者可能會導致更好的性能。

一些信息： Improving the Performance of your HTML5 App

來源

2013-04-18 00:14:22

我從圖像拉動高度/寬度，然後計算最接近的尺寸與容器保持比率是相同的。必須支持所有瀏覽器，並且因爲它在其他所有方面都表現出色，所以我不認爲我必須爲Chrome瀏覽器進行轉換。 – Aaron

當你剖析問題與圖像調整大小，並在Chrome解碼，最好使用開發工具時間軸這個，因爲它可以給你什麼花了很長時間來進行解碼相對準確的統計數據。縮小尺寸（或重新調整尺寸）涉及到Chrome必須對您發送的圖像（JPEG/PNG/GIF）進行解碼，然後執行額外的工作將圖像大小調整爲容器（div）希望將其展示出來。在可能的情況下，Chrome團隊的建議是將圖片預分級至所需的正確寬度/高度。

現在，你可能會想：好，想必這個問題只是下降到桌面版Chrome吸吮，對不對？這不是那麼明確。特別是在瀏覽器無法使用強大的GPU/CPU的移動設備上，在那裏執行這些調整大小操作的成本也會很高。所以簡而言之：是的，縮放Chrome瀏覽器的大圖片有時會變慢。嘗試在可能的情況下進行預分頻，這些性能瓶頸應該消失。

來源

2014-01-01 19:54:32 addyo

我有完全相同的問題，但最近解決了它。大量的性能會佔用chrome的抗鋸齒功能，因爲無論何時調整大小，它都會重新計算整個圖像。

所以要解決它，你剛剛加入這一行的CSS，如果你的形象：

#myImage 
{ 
    image-rendering: -webkit-optimize-contrast; 
}

您可以通過JavaScript的形象仍然是將其關閉。

更多關於抗混疊：Disable antialising when scaling images

來源

2014-12-23 10:48:13

縮小圖像在Chrome中速度很慢

回答

相關問題