Question

使用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图像，因为在这些图像中会应用一些特殊效果，这对于简单的字体是不可能的。

Answer 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。

Answer 2

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

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

Jquery函数用图像替换字符

2 个答案: