<click-to-play> — 一个可播放的静态图像

Simon Willison's Blog 工具
web-component progressive-enhancement gif click-to-play frontend performance

摘要

一种渐进增强的 Web 组件，可将 GIF 链接转换为带有点击播放按钮的静态帧，从而减少不必要的 GIF 加载。

暂无内容
查看原文
查看缓存全文

缓存时间: 2026/06/17 07:36

# 工具：——一个播放的静态画面 来源：https://simonwillison.net/2026/Jun/17/click-to-play-component/ 2026年6月17日 工具（https://simonwillison.net/elsewhere/tool/）——一个播放的静态画面（https://tools.simonwillison.net/click-to-play-component） 一个渐进式增强的 Web 组件，可将这段标记：`` `` 转换为一个静态画面，带有一个点击播放按钮，按需加载 GIF。适用于不想让大型 GIF 自动加载，除非用户想要播放它们的情况。 这里有一个示例（https://simonwillison.net/2026/Jun/16/datasette/），展示了 Datasette 中新增的行编辑工具——事实上，我正是为了那篇文章构建了这个 Web 组件。 发布于 2026 年 6 月 17 日（https://simonwillison.net/2026/Jun/17/）凌晨 3:56

相似文章

@VincentLogic: 以前做前端，为了个加载动画，要么到处找 GIF，要么自己写 CSS 写到头秃。 最近看到这个 math-curve-loaders 开源库，完全是用数学公式生成的动效。 我看了一下，玫瑰曲线、李萨如曲线这些数学图形，动效极其优雅。纯 HT…

X AI KOLs Timeline

介绍了一个名为 math-curve-loaders 的开源前端库，利用数学公式（如玫瑰曲线、李萨如曲线）生成优雅的加载动画，纯 HTML+CSS 实现，零依赖，并带有可视化调试面板，可以实时调整参数并一键复制代码。

渐进式 Web Components

Hacker News Top

Ariel Salminen 介绍了 Elena，一个 2.6kB 的开源库，用于构建渐进式 Web Components，这些组件无需 JavaScript 即可渲染 HTML 和 CSS，并逐步增强。文章解释了该方法背后的设计理念和分类法。

S 网站图标中的 Pong 游戏

Hacker News Top

一个完整的 Pong 游戏正在浏览器标签页的网站图标中运行；上下滚动来移动球拍，得分显示在标签页标题中。