Remplacer certains mots par des liens vers des définitions en utilisant Javascript

Question

J'essaye de créer un système de glossaire qui va obtenir une liste de mots communs et leurs définitions via ajax, puis remplacer toute occurrence de ce mot dans certains éléments (ceux avec la classe useGlossary) avec un lien vers la définition complète et fournir une courte définition sur le survol de la souris. La façon dont je le fais fonctionne, mais pour les grandes pages il faut 30-40 secondes, au cours de laquelle la page se bloque. Je voudrais soit diminuer le temps qu'il faut pour faire le remplacement, soit faire en sorte que le remplacement fonctionne en arrière-plan sans accrocher la page. J'utilise jquery pour la plupart du javascript, et Qtip pour le survol de la souris. Voici mon code lent existant:

$(document).ready(function() { 
    $.get("fetchGlossary.cfm", null, glossCallback, "json"); 
}); 

function glossCallback(data) 
{ 

    $(".useGlossary").each(function() { 
     var $this = $(this); 
     for (var i in data) 
     { 

      $this.html($this.html().replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);})); 
     } 
     $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } }) 
    }); 
} 

function makeLink(m, def) 
{ 
    return "<a class='glossary glossary" + m.replace(/\s/gi, "").toUpperCase() + "' href='reference/glossary.cfm' title='" + def + "'>" + m + "</a>"; 
} 

Merci pour vos commentaires/suggestions!

Answer 1

Au lieu de remplacer le code HTML sur et plus, pourquoi ne pas modifier votre fonction comme ceci:

function glossCallback(data) 
{ 

    $(".useGlossary").each(function() { 
     var $this = $(this); 
     var html = $this.html(); 
     for (var i in data) 
     { 

      html.replace(new RegExp("\\b" + data[i].term + "\\b", "gi"), function(m) {return makeLink(m, data[i].def);}); 
     } 
     $this.html(html); 
     $this.find("a.glossary").qtip({ style: { name: 'blue', tip: true } }) 
    }); 
} 

De cette manière, le DOM ne doit rafraîchir sur chaque REPLACE.