Simon Willison's Weblog

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

7.0内容质量

TL;DR · AI 摘要

本文介绍了一个名为 <click-to-play> 的 Web 组件，用于按需加载 GIF，提升网页性能。

核心要点

  • <click-to-play> 组件通过点击触发 GIF 加载，避免了自动加载大文件。
  • 该组件适用于需要优化页面性能的场景，如 Datasette 应用。
  • 使用 <click-to-play> 可以减少初始页面加载时间，提升用户体验。

结构提纲

按章节快速跳转。

  1. §引言

    介绍 <click-to-play> 组件及其用途。

  2. ·组件功能

    <click-to-play> 组件通过点击触发 GIF 加载，避免自动加载大文件。

  3. ›使用场景

    该组件适用于需要优化页面性能的场景，如 Datasette 应用。

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • <click-to-play> 组件
    • 功能
      • 点击触发 GIF 加载
      • 避免自动加载大文件
    • 使用场景
      • Datasette 应用

金句 / Highlights

值得收藏与分享的关键句。

#Web Components#性能优化#GIF 加载
打开原文

工具： <click-to-play> — 一张静态图片，点击后播放

Simon Willison 的博客

订阅

#smallhead

由以下公司赞助：

微软 — Agent 项目在演示和生产之间停滞。微软的 MVP 检查表填补了这一空白。

尝试一下

2026 年 6 月 17 日

工具

<click-to-play> — 一张静态图片，点击后播放

一个渐进增强的 Web 组件，将以下标记：

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

转换为一个静态图片，带有一个点击播放按钮，当用户点击时加载 GIF。适用于你不想在用户点击之前加载大尺寸 GIF 的情况。

这是一个展示 Datasette 新的行编辑工具的示例 —— 事实上，我为这篇博文创建了这个 Web 组件。

发布于

凌晨 3:56

最近的文章

  • Datasette Apps：在 Datasette 中托管自定义 HTML 应用 —— 2026 年 6 月 18 日
  • GLM-5.2 可能是目前最强大的仅文本的开源权重 LLM —— 2026 年 6 月 17 日
  • 将 WASM 轮子发布到 PyPI 以供 Pyodide 使用 —— 2026 年 6 月 13 日

#primary

这是 Simon Willison 于 2026 年 6 月 17 日发布的一篇文章。

gif

6

javascript

759

progressive-enhancement

14

web-components

23

月度简报

每月赞助我 10 美元，获取本月最重要的 LLM 开发进展的精选电子邮件摘要。

让我少发点邮件给你！

赞助并订阅

.metabox

#secondary

#wrapper

  • 披露
  • 附录
  • ©
  • 2002
  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
  • 2025
  • 2026