Pourquoi le script jquery prend-il une éternité?

Question

Je suis nouveau sur jquery et j'exécute un script sur ma page d'accueil qui détermine le nombre de lignes dans un conteneur (c'est-à-dire div). Si le nombre de lignes est supérieur à 3 ou 4 lignes (selon que la classe div est "threeline" ou "fourline"), elle sera tronquée et ajoutera une ellipse. Cependant, ce script prend une éternité à s'exécuter alors je me demande pourquoi ou comment il peut être optimisé. J'ai essayé d'envelopper javascript/jquery, mais c'est vraiment une langue étrangère pour moi!

Quelqu'un peut-il s'il vous plaît jeter un oeil à ce script et laissez-moi savoir comment je peux le modifier pour le rendre plus rapide? Vérifie-t-il inutilement tous les éléments de la page?

Voici comment on l'appelle sur ma page php:

<div class="bubble left"> 
    <div class="rounded"> 
      <blockquote class="ellipsis fourline"> 
        <h3><a href="http://www.xyz.com">This is the title</a></h3> 

        <p>This is the body of the quote; if the body plus title is more than fourlines, then the text will be truncated and an ellipsis will be added</p> 
      </blockquote> 
    </div> 
    <cite class="rounded">March 18, 2010</cite> 
    </div> 


<script type="text/javascript" src="/scripts/js/jquery.ellipsis.js"></script> 
<script type="text/javascript"> $(".ellipsis").ellipsis(); </script> 

Ce fichier est le jquery.ellipsis.js:

(function($) { 
     $.fn.ellipsis = function() 
     { 
       return this.each(function() 
       { 
         var el = $(this); 

         if(el.css("overflow") == "hidden" && el.hasClass('fourline')) 
         { 
           var text = el.html(); 
           var fourline = el.hasClass('fourline'); 
           var t = $(this.cloneNode(true)) 
             .hide() 
             .css('position', 'absolute') 
             .css('overflow', 'visible') 
             .width(fourline ? el.width() : 'auto') 
             .height(fourline ? 'auto' : el.height()) 
             ; 

           el.after(t); 

           function height() { return t.height() > el.height(); }; 
           function width() { return t.width() > el.width(); }; 

           var func = fourline ? height : width; 

           while (text.length > 0 && func()) 
           { 
             text = text.substr(0, text.length - 1); 
             t.html(text + "…"); 
           } 

           el.html(t.html()); 
           t.remove(); 
         } else if (el.css("overflow") == "hidden" && el.hasClass('threeline')) 
         { 
           var text = el.html(); 
           var threeline = el.hasClass('threeline'); 
           var t = $(this.cloneNode(true)) 
             .hide() 
             .css('position', 'absolute') 
             .css('overflow', 'visible') 
             .width(threeline ? el.width() : 'auto') 
             .height(threeline ? 'auto' : el.height()) 
             ; 

           el.after(t); 

           function height() { return t.height() > el.height(); }; 
           function width() { return t.width() > el.width(); }; 

           var func = threeline ? height : width; 

           while (text.length > 0 && func()) 
           { 
             text = text.substr(0, text.length - 1); 
             t.html(text + "…"); 
           } 

           el.html(t.html()); 
           t.remove(); 
         } 
       }); 
     }; 
})(jQuery); 

Merci à l'avance, j'adore ce site!

Answer 1

difficile à dire étant donné qu'il ya beaucoup de code là-bas.

Je considérerais l'aide d'un profileur, comme le profileur Firebug pour déterminer ce qui vous frappe le plus dur.

http://getfirebug.com/wiki/index.php/Console_Panel#Profiling

Du haut de ma tête je suppose qu'il a quelque chose à voir avec les itérations tandis que, et le fait que vous enchaînez plusieurs fonctions pendant eux. Le profilage vous donnera une meilleure image cependant.

Answer 2

je suis sûr qu'il est ceci:

while (text.length > 0 && func()) 
{ 
     text = text.substr(0, text.length - 1); 
     t.html(text + "…"); 
} 

il semble que votre mise en boucle pendant que vous avez encore le texte, en prenant un caractère hors tension et le mettre dans un div. Si vous avez beaucoup de caractères cela prendra du temps.

pourquoi ne pas utiliser un plug-in?

il y a une très bonne discussion à ce sujet ici: http://devongovett.wordpress.com/2009/04/06/text-overflow-ellipsis-for-firefox-via-jquery/

pour IE, Safari et Chrome, vous pouvez simplement mettre le texte à débordement et il va ellipsis prendre soin pour vous.