如何原生懒加载视频或图片

如何原生延迟加载视频或图片

延迟加载视口以下的图片和视频将对网站的初始加载速度产生积极影响。以下是 Framer 如何为你完成大部分工作,以及如果你想进一步优化可以采取的措施。

图片懒加载

Framer 会自动对大多数视口以下的图片进行懒加载,无需您采取任何操作。

例外情况

  • 组件内部的图片。

  • CMS 文本字段中的图片。

这些例外情况将由 Framer 的性能工程团队在后续更新中解决。在此之前,您可以使用代码组件或覆盖功能来为这些情况启用懒加载。如需帮助,请查看 Framer 社区或在开发者空间中发帖求助。

视频懒加载

我们建议使用 YouTube 或 Vimeo 嵌入方式,而不是直接上传视频到 Framer。这些集成方式会自动实现懒加载,无需额外操作即可优化性能。更多详情请参阅此 视频优化文章

如果您直接上传视频(不推荐)

  1. 创建一个包含两个变体的组件:

    • 变体 1:显示缩略图并隐藏视频。

    • 变体 2:显示视频并隐藏缩略图。

  2. 添加一个 滚动变体 动画,仅在组件进入视口时才显示视频。

总结

懒加载能显著提升网站的加载速度。虽然 Framer 已经处理了大部分工作,但您仍可使用上述策略优化特定场景,以最大化性能表现。

如果按照上述步骤操作后问题仍然存在,欢迎通过我们的 联系页面 与我们取得联系以获得进一步帮助。

Create a free website with Framer, the website builder loved by startups, designers and agencies.