jQuery函數與圖像

替換的字符是否使用jQuery的功能，從文本到自定義字符圖像替換每個字符是一個好主意？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圖像的每個字符，而不是字體文件。

來源

2011-12-20 user1091856

什麼是視覺障礙者要做你難以理解的一堆圖像？ – 2011-12-20 01:48:01

如果預加載圖像，它不會減慢頁面的速度，但是您應用了哪些特殊效果？我有一種感覺，有更好的方法。 – Vigrond 2011-12-20 01:49:01

我的2美分是使用css精靈來提高性能。採取莫的建議，並確保您的實際文字保留在頁面上。 – 2011-12-20 02:00:57

的主要問題，如畝提到的，就是這會影響輔助功能：視力障礙的人可以使用解析網頁和閱讀的內容還給他們的讀者。

是的，這會減慢頁面加載時間極大，現在你的瀏覽器有要求的新形象在你的頁面的每個字符。

來源

2011-12-20 01:52:36

爲什麼會影響搜索引擎在頁面加載後通過JavaScript/jQuery進行替換時解析頁面的嘗試？ – nnnnnn 2011-12-20 04:30:08

@nnnnnn - 你是對的+1。謝謝你讓我誠實。 – 2011-12-20 04:43:09

@AdamRackis：我同意關於視覺障礙的人，但是1）你可以放大從頁/縮小，2）有避免與多個請求的問題（至少兩種方式，它們分別是：使用精靈，或base64-在HTML中編碼圖像）。 – Tadeck 2011-12-20 04:56:55

我同意大家。我不知道你計劃的效果如何，但可能會有更好的解決方案。無論如何，如果你決定這樣做就是一個例子。

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。

來源

2011-12-20 01:58:59

jQuery函數與圖像

回答

相關問題