移动 safari 的 SVG 太多了吗?
Too many SVG's for mobile safari?
我正在为我的投资组合网站制作照片滑动画廊,使用 Hugo 构建。代码不是最干净的,但它是我当前使用 HarpJS 构建的巨大升级。在这个过程中我也学到了很多关于 AWS 和 GCP 的知识。
一切都在桌面上运行,直到昨天,一切都在移动设备上运行。
I 运行 Primitive 在所有缩略图上,并输出具有 2500 种形状的 SVG。这可能有点矫枉过正,但我喜欢那种细节层次的视觉效果。它变得非常绘画。
现在该页面在 Mobile Safari 中不断崩溃,这愚蠢地关闭了我 Mac 上的移动网络检查器 - 所以我不确定故障发生在哪里。
每个 SVG 大约 150kb。当我交换 SVG 并再次使用 JPG 时,一切正常,即使这会使页面尺寸变大。我怀疑我的延迟加载插件没有工作,但我不确定。 (我正在使用 Unveil - luis-almeida.github.io/unveil。)
这里是 link 我的临时存储桶上的画廊页面:staging.iammatthias.com
任何 help/advice 将不胜感激!
这无疑是内存限制问题。 Safari 移动版以在渲染 svg 时存在内存限制而著称。可以找到一些解释该问题的文章 - 但它归结为严格限制您在页面上一次性渲染的 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
我正在为我的投资组合网站制作照片滑动画廊,使用 Hugo 构建。代码不是最干净的,但它是我当前使用 HarpJS 构建的巨大升级。在这个过程中我也学到了很多关于 AWS 和 GCP 的知识。
一切都在桌面上运行,直到昨天,一切都在移动设备上运行。
I 运行 Primitive 在所有缩略图上,并输出具有 2500 种形状的 SVG。这可能有点矫枉过正,但我喜欢那种细节层次的视觉效果。它变得非常绘画。
现在该页面在 Mobile Safari 中不断崩溃,这愚蠢地关闭了我 Mac 上的移动网络检查器 - 所以我不确定故障发生在哪里。
每个 SVG 大约 150kb。当我交换 SVG 并再次使用 JPG 时,一切正常,即使这会使页面尺寸变大。我怀疑我的延迟加载插件没有工作,但我不确定。 (我正在使用 Unveil - luis-almeida.github.io/unveil。)
这里是 link 我的临时存储桶上的画廊页面:staging.iammatthias.com
任何 help/advice 将不胜感激!
这无疑是内存限制问题。 Safari 移动版以在渲染 svg 时存在内存限制而著称。可以找到一些解释该问题的文章 - 但它归结为严格限制您在页面上一次性渲染的 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