用图像替换字符的jquery函数答案

【问题标题】：Jquery function that replaces characters with images用图像替换字符的jquery函数
【发布时间】：2011-12-20 12:58:48
【问题描述】：

使用 jquery 函数将文本中的每个字符替换为自定义字符图像是个好主意吗？

例如：调用函数时，你必须传递你想要替换字符的元素作为参数，jquery会做（如果给定元素包含“hello world”）

<img src="h.png"> 
<img src="e.png">
<img src="l.png"> 
<img src="l.png"> 
<img src="o.png"> 
<img src="space.png"> 
<img src="w.png"> 
<img src="o.png"> 
<img src="r.png"> 
<img src="l.png"> 
<img src="d.png">

这个技巧会让我的页面变慢吗？

ps：我想为每个字符使用 png 图像而不是字体文件，因为这些图像中会应用一些使用简单字体无法做到的特殊效果。

【问题讨论】：

视障人士对你那一堆难以理解的图片有什么用？
如果您预加载图像不会减慢页面速度，但是您应用了哪些特殊效果？我觉得有更好的方法。
我的 2 美分是使用 css sprites 来提高性能。听取莫的建议，确保在页面上保留实际文本。
屏幕阅读器将阅读 HTML 源代码，因为它将被 javascript 取代，所以对于视障者来说应该没有问题。使用精灵和/或预加载，您可以克服“减速”问题。还有什么问题吗？

标签： jquery html fonts

【解决方案1】：

我同意每个人的看法。我不知道您打算产生什么效果，但可能会有更好的解决方案。无论如何，如果你决定走这条路，这里就是一个例子；

var text = $('div').text(), i, il= text.length, result = [], char;
for(i=0;i<il;i++) {
    char = text.charAt(i);
    if(char === " ") {
        char = "space";
    }
    result.push('<img src="' + char + '.png" alt="' + char + '" />');
}
$('div').html(result.join(''));

jsFiddle 例子是here。

【讨论】：

【解决方案2】：

正如 mu 所提到的，主要问题是这将影响可访问性：视力受损的人可以使用解析网页并将内容读回给他们的阅读器。

是的，这会极大地减慢页面加载时间——现在您的浏览器必须为页面中的每个字符请求一个新图像。

【讨论】：

页面加载后通过 JavaScript/jQuery 进行替换，为什么会影响搜索引擎解析页面的尝试？
@AdamRackis：我同意视力受损的人，但是 1）您可以从页面放大/缩小，2）至少有两种方法可以避免多个请求的问题（它们是: 在 HTML 中使用精灵或 base64 编码图像）。
@Tadeck - 是的 - 当然你可以放大，我不确定我在想什么。就 base-64 编码之类的简洁解决方法而言，这肯定会奏效，但这与 OP 最初的要求相去甚远。