移動Safari瀏覽器的SVG太多了嗎？

我正在使用Hugo構建我的投資組合網站的photoswipe畫廊。該代碼不是最乾淨的，但它是使用HarpJS從當前版本進行的巨大升級。在這個過程中，我也學到了很多關於AWS和GCP的知識。移動Safari瀏覽器的SVG太多了嗎？

一切工作在桌面上，直到昨天，一切工作在移動。

我在所有縮略圖上運行了Primitive，並輸出了2500個形狀的SVG。這可能是主要的矯枉過正，但我喜歡這種細節層面的視覺效果。它變得非常繪畫。

現在頁面在移動Safari中不斷崩潰，它在我的Mac上愚蠢地關閉了移動網絡檢查器 - 所以我不確定發生了什麼故障。

每個SVG約爲150KB。當我交換SVG並再次使用JPG時，一切正常，儘管這會使頁面尺寸變大。我懷疑我的懶加載插件不工作，但我不確定。（我使用的是揭開 - luis-almeida.github.io/unveil。）

這裏的畫廊頁的鏈接在我的分期鬥：staging.iammatthias.com

任何幫助/建議將不勝感激！

來源

2017-02-21 iammatthias

這無疑是一個內存限制問題。 Safari移動在渲染svgs方面存在內存限制。有些文章解釋了這個問題 - 但歸結起來就是嚴格限制您在頁面上一次渲染的SVG數量（您的站點甚至在桌面Safari上與所有這些SVG一起掙扎）。 iOS中唯一的解決方法是一次只從服務器上延遲加載圖像，或者切換到不使用SVG的情況。

額外的閱讀幾個鏈接：

https://www.richdynamix.com/blog/svg-vs-png-in-sprites-an-ios-issue

https://discussions.apple.com/thread/7530327?start=0&tstart=0

來源

2017-02-21 21:39:06 Korgrue

謝謝，我很擔心這是事實。我會考慮將SVG的背景轉換爲JPG格式 – iammatthias

我喜歡這種富有藝術感的外觀。你不能只接受svgs，在illustrator中打開它們，並將它們重新導出爲jpgs或png，從而保持外觀 - 沒有內存開銷？ – Korgrue

這是一個選項，但由於有多少有點難以支持！但我認爲Primitive有PNG輸出 - 我今晚晚些時候會玩這個。 – iammatthias

移動Safari瀏覽器的SVG太多了嗎？

回答

相關問題