2010-11-09 13 views
4

J'ai un script de contact. Il utilise jQuery pour ses requêtes et animations ajax. Je l'utilise également avec un plugin hashchange pour fixer le bouton de retour. La partie lente est là. Après avoir terminé l'animation du 'flip', le formulaire s'estompe lentement. Les navigateurs semblent bloquer pendant une seconde. J'essaye de le rendre vif (pas de blocage).Comment rendre cette page pilotée par jQuery plus vive?

Voici la fonction responsable de la gestion de l'événement de changement de hachage:

handleHashChange : function() { 

    // Get the name of the object and cache it 
    var self = this, 

    // Get the current hash 
     hash = window.location.hash, 

    // Cache the form height var 
     formHeight = ''; 

    // If the hash is #send or #error, don't do anything 
    if (hash === "#sent" || hash === "#error") {   
     return; 
    } 

    // Change the page title back to the default 
    if(self.documentTitle && self.documentTitle != undefined) { 
     document.title = self.documentTitle; 
    } 

    // Reset all inputs in the form 
    self.inputs.val('').removeAttr('checked').removeAttr('selected'); 

    // Get the height of the form 
    formHeight = self.getHeight(self.form); 

    // Show the transition    
    self.showTransition(self.response, formHeight, function() { 

     // Show the form 
     self.form.fadeIn('fast', function() { 

      // Show the button 
      self.button[0].style.display = 'block'; 

      // Focus the first input 
      self.inputs[0].focus(); 

     }) 

    }) 
} 

Le code entier peut être vu à partir du lien ci-dessous, il est entièrement documenté:

http://www.coolcontact.co.cc/beta/1.3/js/main.js

Vous pouvez voir J'ai utilisé beaucoup de conseils que j'ai trouvés sur Internet pour optimiser ce script, sauf utiliser le 'natif' de javascript à la place de '$ .each()', mais ce n'est pas un gros problème ici.

Si quelqu'un veut voir la lenteur, essayez d'envoyer un message vide (validation est désactivé) à partir du lien ci-dessous puis cliquez sur le bouton de retour dans votre navigateur:

(note: ce n'est pas en anglais, mais devinez c'est assez explicite ^^)

http://www.coolcontact.co.cc/beta/1.3/

Alors, comment puis-je le rendre plus accrocheurs?

+2

Je n'ai pas de réponse pour vous, mais vous avez créé une belle interface graphique! – Ben

+0

Je pense que c'est déjà sacrément accro! – Dutchie432

+0

Je suis d'accord, ça a l'air très bien ici. Quel navigateur utilisez-vous? – cambraca

Répondre

1

Je pense que c'est déjà assez rapide, mais voici quelque chose que j'ai remarqué avec votre code.

Cette instruction "if" est un peu redondante.

if(self.documentTitle && self.documentTitle != undefined) { 
    document.title = self.documentTitle; 
} 

L'appel à « self.documentTitle » retournera évaluer « false » si sa valeur est « non défini », de sorte que vous n'avez pas besoin du second « self.documentTitle! = Undefined ».

Vous pouvez simplement utiliser le follwing à la place:

if(self.documentTitle){ 
    document.title = self.documentTitle; 
} 

Rappelez-vous, les fausses valeurs, null, non défini, 0 et une chaîne vide tout à une fausse évaluer la valeur booléenne.