文字をイメージに置き換えるJquery関数

Question

テキストの各文字をカスタム文字イメージに置き換えるjquery関数を使用することをお勧めしますか？

例：関数を呼び出すとき、あなたは文字を置換したい要素を引数として渡す必要があり、とjQueryが行います（指定した要素が「こんにちは世界」が含まれている場合）

<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

主な問題点は、これがアクセシビリティに影響するということです。視覚障害のある人々は、Webページを解析して内容を読み上げる読者を利用できます。

はい、これによりページの読み込み時間が大幅に短縮され、ブラウザはページ内の各文字に新しい画像をリクエストする必要があります。

Answer 2

私は全員に同意します。あなたはどのような効果を期待しているのか分かりませんが、よりよい解決策があるかもしれません。とにかく、ここに行くことを決めたら、ここに例があります。

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('')); 

js例はhereです。