0

我正在为我的投资组合网站制作一个使用 Hugo 构建的 photoswipe 画廊。代码不是最干净的,但它是我当前使用 HarpJS 构建的一个巨大升级。在这个过程中,我也学到了很多关于 AWS 和 GCP 的知识。

一切都在桌面上运行,直到昨天,一切都在移动设备上运行。

我在所有缩略图上运行Primitive,并输出 2500 个形状的 SVG。这可能是主要的矫枉过正,但我​​喜欢这种细节层次的视觉效果。它变得非常有绘画感。

现在页面在 Mobile Safari 中不断崩溃,这愚蠢地关闭了我 Mac 上的移动网络检查器 - 所以我不确定故障发生在哪里。

每个 SVG 大约为 150kb。当我交换 SVG 并再次使用 JPG 时,一切正常,即使这会使页面变大。我怀疑我的延迟加载插件不起作用,但我不确定。(我正在使用 Unveil - luis-almeida.github.io/unveil。)

这是我的暂存桶上画廊页面的链接:staging.iammatthias.com

任何帮助/建议将不胜感激!

4

1 回答 1

0

这无疑是一个内存限制问题。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

于 2017-02-21T21:39:06.877 回答