🛠 工具 / 开源

<click-to-play> —— 一个可播放的静态帧组件<click-to-play> — a still that plays

simonwillison.net·2026-06-17 节选正文

<click-to-play> 是一个采用渐进增强技术的 Web Component，它能将包含图片和 GIF 链接的简单 HTML 标签转换为带有“点击播放”按钮的静态帧。该组件的核心作用是按需加载大体积 GIF 文件，只有当用户真正点击时才会请求加载完整动图。这种方案有效解决了网页因预加载大量 GIF 而导致的性能下降和带宽浪费问题。作者通过提供这一轻量级工具，帮助开发者在保持页面丰富视觉内容的同时大幅优化加载体验。

阅读原文

Simon Willison

17th June 2026

Tool <click-to-play> — a still that plays

A progressive enchantment Web Component that turns this markup:

<click-to-play>
  <a href="URL to GIF">
    <img src="URL to first frame" alt="...">
  </a>
</click-to-play>

Into a still frame with a click to play button which loads the GIF on demand. For when you don't want big GIFs to be loaded unless people want to play them.

Here's an example that demonstrates the new row editing tools in Datasette - in fact I built this Web Component for that post.

Posted 17th June 2026 at 3:56 am

需要完整排版与评论请前往来源站点阅读。