如何在不通过 HTTP 加载图像的情况下在 HTML 中显示“重新加载”符号？

Posted 2023-02-24

【中文标题】如何在不通过 HTTP 加载图像的情况下在 HTML 中显示“重新加载”符号？

【英文标题】：How can I display a 'Reload' symbol in HTML without loading an image via HTTP?

【发布时间】：2012-11-08 14:16:55

【问题描述】：

我想在我正在创建的 html/javascript 应用程序中显示“刷新”符号，但我不想发出任何 HTTP 请求来加载图像。如何在所有主流浏览器中可靠地做到这一点？

我能找到的最接近的 Unicode 值是：↺ (↺)，但箭头指向错误的方向。

还有其他有效的 Unicode 值吗？

是否有有效的 Webdings 字体？ （它们通常不适用于 Opera 和 Firefox。）

有没有办法在 JavaScript 中使用由该 JS 中的字符串提供的 base64 图像源 创建图像？

编辑：

原因不是开销。正在创建的应用程序必须自包含在单个 javascript 文件中，没有任何其他依赖项。它是一种开发实用程序，可以添加到任何项目中，无需网络。

【问题讨论】：

这必须在Lynx 上运行吗？！我很好奇为什么图片不合适。但是，this question 讨论了使用 JS 从二进制文件加载图像 - 也许这会有所帮助？

为什么不用“刷新”这个词呢？想一想，它必须是一个符号来告诉用户它进行了刷新吗？

@Joseph：Steve B. 我没有考虑到这一点。但这会淘汰许多浏览器，不是吗？

⭯ ⭮ ↺ ↻ ⟲ ⟳ ????????

@DanRoberts: no they don't!这是一个神话。只有extremely few 字符需要进行编码，具体取决于它们出现的位置。最重要的是<。

【参考方案1】：

如果你发现字符↻(↻)，即U+21BB CLOCKWISE OPEN CIRCLE ARROW，可以满足你的需要（它的箭头可能与常见的重新加载图标的放置方式不同），那么你可以使用它相当安全：

.reload 
  font-family: Lucida Sans Unicode

<span class=reload>↻</span>

Lucida Sans Unicode 字体包含该符号，并且现在几乎可以在您可以找到的任何 Windows 系统中使用。根据MS info 的说法，它甚至包含在 Windows 98（和 Windows 95 plus）中。

可以合理地期望 Windows 以外的系统具有 some 字体的符号，并且具有知道如何从其中一些字体中获取它的浏览器。而fonts containing it 的形状非常相似。 （但如果符号需要在风格上与文档文本匹配，则需要更详细地研究情况，并尝试确保字体列表或“字体堆栈”中的所有字体都包含它。）

【讨论】：

@dpd，你的 jsfiddle 应该展示什么？它声明了 Arial，它不包含 U+21BB，所以你得到的是浏览器的默认字体或备用字体，或者在某些旧浏览器中，失败。

【参考方案2】：

Unicode 字符

至少有两个 Unicode 字符可以用作 Refresh 或 Reload 图标：

顺时针间隙圆箭头U+27F3⟳ 顺时针开圆箭头U+21BB↻

第一个不会出现在 ios 7 或 8 或 9 的 Safari 或 Chrome 中。所以考虑到这一点，并给出the answer by Paul D. White，我建议使用第二个CLOCKWISE OPEN CIRCLE ARROW。

提示：如果您是 Mac 用户，请获取免费应用程序UnicodeChecker。您可以按名称搜索字符，并且可以看到包含该字符字形的字体列表（在您的特定 Mac 上）。

图标字体

有些字体是用基于矢量的可缩放图标代替常规字符字形创建的。

Font Awesome，见：fa-repeat Vaadin Font Icons

【讨论】：

⟳ 看起来像是 chrome 在其 UI 中使用的那个。 (HTML 实体𘽾)

【参考方案3】：

如果浏览器支持从 Base64 字符串加载图像数据，您可以使用 img 并将其 src 设置为以下格式：

data:[<mediatype>][;base64],<data>

例子：

var img = document.getElementById("yourImage");
img.src = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";

<img id="yourImage" />

【讨论】：

请不要忘记，与使用<img src='**'> 加载的文件相比，这会导致开销。这将包括 B64 格式的整个图片（如果我是对的，则重 2.5 倍）。这将在每次呈现页面时重新加载，而不是在提供静态图片时一次（使用缓存）。但是，如果图片很小（可能是这里的情况），并且是否可以接受过度读取，这可能是一个有效的解决方案。 （压缩或压缩 http 通道也有帮助）

@SteveB：“如果我是对的，2.5 倍”——我认为这取决于图像，以及 gzip 压缩对包含 base64 编码字符串的文件的影响在。

@SteveB：“这将在每次呈现页面时重新加载，而不是在提供静态图片时一次（使用缓存）”——尽管如果包含 base64 编码字符串的文件是缓存。

@PaulD.Waite：这是可能的，但它需要完整的 javascript 加载动态内容（如果不是，刷新操作将毫无意义）。但这是可能的

@SteveB：嗯，base64 编码的字符串可能包含在缓存的外部 JavaScript 文件中，不会（必然）因为 HTML 页面被重新下载。

【参考方案4】：

与您的 Unicode 字符对应的顺时针方向是 ↻、↻（尽管在 cmets 中 David C. Bishop 注释为 Chromebooks use #27f2, ⟳）。

可以选择使用文本字符，但 Windows XP 可能不会显示该字符（取决于您使用的字符和显示它的字体）。 @Jukka K. Korpela notes that this character is included in the Lucida Sans Unicode font, so it should work fine even in Windows XP.

就 Wingdings 字体而言，为避免 HTTP 请求，您需要确信相关字体将安装在最终用户的计算机上。我认为没有通用的跨平台 Wingdings 字体（不过我可能完全错了）。

您确实可以使用 JavaScript 从包含图像的 base64 编码表示的字符串创建图像。你可以这样做：

var image = new Image();
image.src = 'data:image/gif;base64,' + BASE64_ENCODED_STRING; // Replace gif with whatever image format it actually is

不过，data-uri 在 Internet Explorer 8 及更早版本中可能无法正常工作，Windows XP 用户可能会被卡住。 （而且你实际上并不需要 JavaScript：你可以在你的页面中添加一个 <img> 标签，并带有 src 属性。）

【讨论】：

⟳ 27f2 is what chrome uses 进行刷新。

27f2 是 ⟲ 走另一条路，⟳ 是 27f3

【参考方案5】：

Unicode 6 字符

'顺时针向下和向上空心圆箭头' (U+1F503) ?

遗憾的是，对字形的字体支持不是最好的，所以“所有主要浏览器”可能有点牵强...：-/

【讨论】：

// , 适用于 Chromium 和 Firefox

【参考方案6】：

.refresh 
  display: inline-block;
  transform: rotate(90deg);

<span>↻</span>
<hr>
<span class="refresh">↻</span>

【参考方案7】：

您提到“所有主要浏览器”，所以我们假设：

不是每个人都有javascript 不是每个人都可以嵌入字体（黑莓等） 并非所有人都支持所有 UNCODE 表示（Windows XP） 并非所有人都支持内联数据 uri (IE7-)

那么还剩下什么？我建议使用符合 HTML1 的 IMG 元素，它也会在首次加载后被缓存：

<img src="/refresh.gif" >

它可以在我所知道的每一个浏览器中运行，除了 LYNX 和其他纯文本浏览器。但他们会改为显示“刷新”，所以没关系。

如果你真的想避免对“现代”浏览器的额外 2 字节请求，你可以使用 IE7 的条件 cmets-:

<!--[if lte IE 7]>
<img src="refresh.gif" >
<![endif]-->

剩下的就是这样：

<img src="data:image/gif;base64,..." >

如果您想要最新的东西，您可以使用 CSS 框阴影 (demo)：

.refresh
    border-radius: 0;
    display: inline-block;
    width: 1px;
    height: 1px;
    box-shadow: 0px 0px rgba(0,0,0,0),0px 1px rgba(0,0,0,0),0px 2px rgba(0,0,0,0),0px 3px rgba(0,0,0,0),0px 4px rgba(0,0,0,0),0px 5px rgba(0,0,0,0),0px 6px rgba(0,0,0,0),0px 7px rgba(0,0,0,0),0px 8px rgba(0,0,0,0),0px 9px rgba(0,0,0,0),0px 10px rgba(0,0,0,0),0px 11px rgba(0,0,0,0),0px 12px rgba(0,0,0,0),0px 13px rgba(0,0,0,0),0px 14px rgba(0,0,0,0),0px 15px rgba(0,0,0,0),1px 0px rgba(0,0,0,0),1px 1px rgba(0,0,0,0),1px 2px rgba(0,0,0,0),1px 3px rgba(0,0,0,0),1px 4px rgba(0,0,0,0),1px 5px rgba(0,0,0,0),1px 6px rgba(0,0,0,0),1px 7px rgba(0,0,0,0),1px 8px rgba(0,0,0,0),1px 9px rgba(0,0,0,0),1px 10px rgba(0,0,0,0),1px 11px rgba(0,0,0,0),1px 12px rgba(0,0,0,0),1px 13px rgba(0,0,0,0),1px 14px rgba(0,0,0,0),1px 15px rgba(0,0,0,0),2px 0px rgba(0,0,0,0),2px 1px rgba(0,0,0,0),2px 2px rgba(0,0,0,0),2px 3px rgba(0,0,0,0),2px 4px rgba(0,0,0,0),2px 5px rgba(0,0,0,0.06),2px 6px rgba(0,0,0,0.55),2px 7px rgba(0,0,0,0.79),2px 8px rgba(0,0,0,0.86),2px 9px rgba(0,0,0,0.86),2px 10px rgba(0,0,0,0.65),2px 11px rgba(0,0,0,0.31),2px 12px rgba(0,0,0,0),2px 13px rgba(0,0,0,0),2px 14px rgba(0,0,0,0),2px 15px rgba(0,0,0,0),3px 0px rgba(0,0,0,0),3px 1px rgba(0,0,0,0),3px 2px rgba(0,0,0,0),3px 3px rgba(0,0,0,0),3px 4px rgba(0,0,0,0.25),3px 5px rgba(0,0,0,0.83),3px 6px rgba(0,0,0,0.86),3px 7px rgba(0,0,0,0.83),3px 8px rgba(0,0,0,0.69),3px 9px rgba(0,0,0,0.74),3px 10px rgba(0,0,0,0.86),3px 11px rgba(0,0,0,0.86),3px 12px rgba(0,0,0,0.6),3px 13px rgba(0,0,0,0.06),3px 14px rgba(0,0,0,0),3px 15px rgba(0,0,0,0),4px 0px rgba(0,0,0,0),4px 1px rgba(0,0,0,0),4px 2px rgba(0,0,0,0),4px 3px rgba(0,0,0,0.25),4px 4px rgba(0,0,0,0.83),4px 5px rgba(0,0,0,0.83),4px 6px rgba(0,0,0,0.43),4px 7px rgba(0,0,0,0),4px 8px rgba(0,0,0,0),4px 9px rgba(0,0,0,0),4px 10px rgba(0,0,0,0.13),4px 11px rgba(0,0,0,0.69),4px 12px rgba(0,0,0,0.86),4px 13px rgba(0,0,0,0.6),4px 14px rgba(0,0,0,0),4px 15px rgba(0,0,0,0),5px 0px rgba(0,0,0,0),5px 1px rgba(0,0,0,0),5px 2px rgba(0,0,0,0),5px 3px rgba(0,0,0,0.69),5px 4px rgba(0,0,0,0.86),5px 5px rgba(0,0,0,0.25),5px 6px rgba(0,0,0,0),5px 7px rgba(0,0,0,0),5px 8px rgba(0,0,0,0),5px 9px rgba(0,0,0,0),5px 10px rgba(0,0,0,0),5px 11px rgba(0,0,0,0),5px 12px rgba(0,0,0,0.69),5px 13px rgba(0,0,0,0.86),5px 14px rgba(0,0,0,0.25),5px 15px rgba(0,0,0,0),6px 0px rgba(0,0,0,0),6px 1px rgba(0,0,0,0),6px 2px rgba(0,0,0,0.13),6px 3px rgba(0,0,0,0.86),6px 4px rgba(0,0,0,0.6),6px 5px rgba(0,0,0,0),6px 6px rgba(0,0,0,0),6px 7px rgba(0,0,0,0),6px 8px rgba(0,0,0,0),6px 9px rgba(0,0,0,0),6px 10px rgba(0,0,0,0),6px 11px rgba(0,0,0,0),6px 12px rgba(0,0,0,0.13),6px 13px rgba(0,0,0,0.86),6px 14px rgba(0,0,0,0.65),6px 15px rgba(0,0,0,0),7px 0px rgba(0,0,0,0),7px 1px rgba(0,0,0,0),7px 2px rgba(0,0,0,0.43),7px 3px rgba(0,0,0,0.86),7px 4px rgba(0,0,0,0.31),7px 5px rgba(0,0,0,0),7px 6px rgba(0,0,0,0),7px 7px rgba(0,0,0,0),7px 8px rgba(0,0,0,0),7px 9px rgba(0,0,0,0),7px 10px rgba(0,0,0,0),7px 11px rgba(0,0,0,0),7px 12px rgba(0,0,0,0),7px 13px rgba(0,0,0,0.75),7px 14px rgba(0,0,0,0.83),7px 15px rgba(0,0,0,0),8px 0px rgba(0,0,0,0),8px 1px rgba(0,0,0,0.43),8px 2px rgba(0,0,0,0.69),8px 3px rgba(0,0,0,0.86),8px 4px rgba(0,0,0,0.6),8px 5px rgba(0,0,0,0.31),8px 6px rgba(0,0,0,0),8px 7px rgba(0,0,0,0),8px 8px rgba(0,0,0,0),8px 9px rgba(0,0,0,0),8px 10px rgba(0,0,0,0),8px 11px rgba(0,0,0,0),8px 12px rgba(0,0,0,0),8px 13px rgba(0,0,0,0.69),8px 14px rgba(0,0,0,0.86),8px 15px rgba(0,0,0,0),9px 0px rgba(0,0,0,0),9px 1px rgba(0,0,0,0.48),9px 2px rgba(0,0,0,0.86),9px 3px rgba(0,0,0,0.86),9px 4px rgba(0,0,0,0.86),9px 5px rgba(0,0,0,0.13),9px 6px rgba(0,0,0,0),9px 7px rgba(0,0,0,0),9px 8px rgba(0,0,0,0),9px 9px rgba(0,0,0,0),9px 10px rgba(0,0,0,0),9px 11px rgba(0,0,0,0),9px 12px rgba(0,0,0,0),9px 13px rgba(0,0,0,0.75),9px 14px rgba(0,0,0,0.83),9px 15px rgba(0,0,0,0),10px 0px rgba(0,0,0,0),10px 1px rgba(0,0,0,0),10px 2px rgba(0,0,0,0.79),10px 3px rgba(0,0,0,0.86),10px 4px rgba(0,0,0,0.6),10px 5px rgba(0,0,0,0),10px 6px rgba(0,0,0,0),10px 7px rgba(0,0,0,0),10px 8px rgba(0,0,0,0),10px 9px rgba(0,0,0,0),10px 10px rgba(0,0,0,0),10px 11px rgba(0,0,0,0),10px 12px rgba(0,0,0,0.13),10px 13px rgba(0,0,0,0.86),10px 14px rgba(0,0,0,0.65),10px 15px rgba(0,0,0,0),11px 0px rgba(0,0,0,0),11px 1px rgba(0,0,0,0),11px 2px rgba(0,0,0,0.38),11px 3px rgba(0,0,0,0.83),11px 4px rgba(0,0,0,0.06),11px 5px rgba(0,0,0,0),11px 6px rgba(0,0,0,0),11px 7px rgba(0,0,0,0),11px 8px rgba(0,0,0,0),11px 9px rgba(0,0,0,0),11px 10px rgba(0,0,0,0),11px 11px rgba(0,0,0,0),11px 12px rgba(0,0,0,0.69),11px 13px rgba(0,0,0,0.86),11px 14px rgba(0,0,0,0.25),11px 15px rgba(0,0,0,0),12px 0px rgba(0,0,0,0),12px 1px rgba(0,0,0,0),12px 2px rgba(0,0,0,0),12px 3px rgba(0,0,0,0.31),12px 4px rgba(0,0,0,0),12px 5px rgba(0,0,0,0),12px 6px rgba(0,0,0,0.25),12px 7px rgba(0,0,0,0),12px 8px rgba(0,0,0,0),12px 9px rgba(0,0,0,0),12px 10px rgba(0,0,0,0.13),12px 11px rgba(0,0,0,0.69),12px 12px rgba(0,0,0,0.86),12px 13px rgba(0,0,0,0.6),12px 14px rgba(0,0,0,0),12px 15px rgba(0,0,0,0),13px 0px rgba(0,0,0,0),13px 1px rgba(0,0,0,0),13px 2px rgba(0,0,0,0),13px 3px rgba(0,0,0,0),13px 4px rgba(0,0,0,0),13px 5px rgba(0,0,0,0.06),13px 6px rgba(0,0,0,0.83),13px 7px rgba(0,0,0,0.83),13px 8px rgba(0,0,0,0.69),13px 9px rgba(0,0,0,0.75),13px 10px rgba(0,0,0,0.86),13px 11px rgba(0,0,0,0.86),13px 12px rgba(0,0,0,0.6),13px 13px rgba(0,0,0,0.06),13px 14px rgba(0,0,0,0),13px 15px rgba(0,0,0,0),14px 0px rgba(0,0,0,0),14px 1px rgba(0,0,0,0),14px 2px rgba(0,0,0,0),14px 3px rgba(0,0,0,0),14px 4px rgba(0,0,0,0),14px 5px rgba(0,0,0,0.13),14px 6px rgba(0,0,0,0.55),14px 7px rgba(0,0,0,0.79),14px 8px rgba(0,0,0,0.86),14px 9px rgba(0,0,0,0.86),14px 10px rgba(0,0,0,0.65),14px 11px rgba(0,0,0,0.31),14px 12px rgba(0,0,0,0),14px 13px rgba(0,0,0,0),14px 14px rgba(0,0,0,0),14px 15px rgba(0,0,0,0),15px 0px rgba(0,0,0,0),15px 1px rgba(0,0,0,0),15px 2px rgba(0,0,0,0),15px 3px rgba(0,0,0,0),15px 4px rgba(0,0,0,0),15px 5px rgba(0,0,0,0),15px 6px rgba(0,0,0,0),15px 7px rgba(0,0,0,0),15px 8px rgba(0,0,0,0),15px 9px rgba(0,0,0,0),15px 10px rgba(0,0,0,0),15px 11px rgba(0,0,0,0),15px 12px rgba(0,0,0,0),15px 13px rgba(0,0,0,0),15px 14px rgba(0,0,0,0),15px 15px rgba(0,0,0,0);

【讨论】：

感谢您的完整解释。这很有帮助。是否有一种结合了数据 URI 和 Unicode 的后备方法，适用于所有主流浏览器？

将黑莓作为一个合理的关注点很有趣。

请注意您的假设 1：OP 明确说明了 Javascript

【参考方案8】：

我认为这个图标会对你有所帮助。

?

编码

 - HTML Entity (decimal)    🗘
 - HTML Entity (hex)    🗘