jQuery: consigli e trucchi utili per migliorare le performance di un sito web


 
 

Quando si sviluppa in jQuery ci si rende conto che esistono diverse maniere di implementare la stessa cosa.

La tendenza è di migliorare e semplificare sempre più scrivendo meno righe di codice per ottimizzare il sorgente.

Spesso si cerca di trovare anche la strada più elegante per risovere un problema.

Ecco quindi un elenco di consigli che potrebbero esservi utili :

1. Aggiungere un link "Torna su" : "Back to top" 

È possibile implementare il bottone "torna su" attraverso uno specifico plugin.

Con scrollTo si creerà un effetto di risalita della pagina.

 Scarica il plugin jQuery scrollTo

// Back to top  $('a.top').click(function (e) 
{    e.preventDefault();    
$(document.body).animate({scrollTop: 0}, 800);  
});

Provate a cambiare i valori per vedere cosa succede!

Pre-caricamento delle immagini

Un'utile soluzione per effettuare rapidamente il preload delle immagini:

$.preloadImages = function () {    
for (var i = 0; i < arguments.length; i++) {      
$('').attr('src', arguments[i]);    }  
};   
 $.preloadImages('img/hover-on.png', 'img/hover-off.png');

Controllare se le immagini sono state caricate

A volte potrebbe essere necessario verificare se le immagini siano state caricate completamente.:

$('img').load(function () {    
console.log('image load successful');  
});

È anche possibile controllare se si è caricata una specifica immagine sostituendo il tag con un ID o una classe.

Cosa fare se un'immagine non si carica

Nel caso un'immagine non si dovesse caricare, questo script viene in nostro aiuto: sostituisce l'immagine che da errore con un'altra di default.

$('img').on('error', function () {    
$(this).prop('src', 'img/broken.png'); 
 });

La funzione ausiliaria degli eventi: hover e toggle

Il metodo $.fn.hover permette passare una o due funzioni da eseguire quando si verificano gli eventi mouseenter e mouseleave. Se si passa una sola funzione, questa sarà eseguita in entrambi gli eventi, ma invece se ne passano due, la prima sarà eseguita quando si verifica l'evento mouseenter, mentre la seconda sarà eseguita quando si verifica mouseleave.

$('.btn').hover(function () {    
$(this).addClass('hover');  }, 
function () {    
$(this).removeClass('hover');  
});

Bisogna solo aggiungere lo stile. Se si cerca un metodo più semplice, si può utilizzare "toggleClassmethod":

$('.btn').hover(function () {    $(this).toggleClass('hover');  });

Disabilitare i campi Input

Tra le numerose possibilità offerte da Jquery c'è anche la funzione utile a disabilitare un campo di input text all'interno di un form

$('input[type="submit"]').prop('disabled', true);

Quello che bisogna fare è utilizzare nuovamente il metodo .prop, impostando il valore su falso (false).

$('input[type="submit"]').prop('disabled', false);

Eliminare la risposta predefinita a un click 

Cancella l'azione predefinita associata a un evento se l'evento lo permette, senza bloccare un'ulteriore propagazione degli eventi.. Ad esempio:

$('a.no-link').click(function (e) {    e.preventDefault();  });

Chiamare preventDefault durante una qualsiasi fase dell'evento lo cancella. Ogni azione predefinita normalmente associata all'evento e gestita automaticamente dal browser viene annullata.

E' possibile utilizzare event.cancelable per controllare se è possibile cancellare l'evento. ChiamarepreventDefault su di un evento che non è cancellabile non ha alcun effetto.

preventDefault non blocca la propagazione degli eventi attraverso il DOM. A questo scopo, si può utilizzare event.stopPropagation.

Effetti Fading e Sliding

Avete presente quell’effetto a comparsa “soft”, beh quello viene chiamato fade. Gli effetti fade, operano variando un attributo CSS: l'opacità dell'immagine.

Come al solito, anche per gli effetti fading, è possibile impostare una durata ed un callbackda eseguire al termine dell'effetto.

Vediamo i metodi che implementano tali effetti:

  • .fadeIn() ([durata],[callback]): mostra l'elemento desiderato;
  • .fadeOut() ([durata],[callback]): effetto di sbiadimento dell'elemento;
  • .fadeTo() (durata,opacità,[callback]): permette di stabilire l'opacità esatta dell'elemento passando come argomento il valore da applicare alla proprietà opacity;
  • .fadeToggle() ([durata],[callback]): effetto che combina .fadeIn() e .fadeTo() e mostra o nasconde un elemento in base al suo stato di visibilità attuale;

Vediamo qualche esempio:

$("#bottone").click(function() {    $("#miaimmagine").fadeIn("fast", function() {      alert('Eccomi qui...');    });  });

Gli effetti di tipo slide generano un'animazione di discesa o risalita per mostrare o nascondere un elemento il quale compare e scompare some se fosse una sorta di "tenda a rullo" che si srotola e riarrotola per mostrarsi e nascondersi.

ediamo di seguito i metodi di questa famiglia:

  • .slideDown() ([durata],[callback]): mostra l'elemento con un effetto a comparsa verso il basso;
  • .slideUp() ([durata],[callback]): nasconde l'elemento con un effetto a scomparsa verso l'alto;
  • .slideToggle() ([durata],[callback]): unisce i due precedenti metodi inquanto inverte la visibilità dell'elemento cui è applicato alternando slideDown e slideUp a seconda che questo sia nascosto o visibile.

 Vediamo un esempio:

$("#bottone").click(function() {    $("#miaimmagine").slideDown("slow", function() {      alert('Eccomi...');    });  });

Semplice Accordion

Un medodo semplice ger generare un accordion :

// Close all panels  $('#accordion').find('.content').hide();    
// Accordion  
$('#accordion').find('.accordion-header').click(function ()
  {    var next = $(this).next();    
next.slideToggle('fast');   
 $('.content').not(next).slideUp('fast');   
 return false;  });

Div e colonne della stessa altezza

A volte abbiamo bisogno che 2 div abbiamo la stessa altezza a prescindere dal loro contenuto:

$('.div').css('min-height', $('.main-div').height());

Questo esempio imposta l'altezza minima, ossia il div puó essere piú grande mai mai piú piccolo della misura preimpostata..

Ovviamente si otterrebbe una flessibilità maggiore con un loop impostato sull' altezza massima.

var $columns = $('.column');  
var height = 0;  
$columns.each(function () {    
if ($(this).height() > height) {      
height = $(this).height();    }  
});  
$columns.height(height);

Se volessimo tutte le colonne alla stessa altezza::

var $rows = $('.same-height-columns');  
$rows.each(function () {    
$(this).find('.column').height($(this).height()); 
 });

Cercare un elemento del testo

Usando il selettore contains() si puó cercare del testo presente in un determinato contenuto. Se il testo non esiste, l'elemento verrà nascosto.

var search = $('#search').val();  
$('div:not(:contains("' + search + '"))').hide();
 
 

tags: jquery trucchi javascript webdev


Comments area, use one of your social accounts to log-in and post a comment.



Responses to the post

Questo sito fa uso di cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Accettando questa informativa dai il consenso al loro utilizzo. È possibile modificare le impostazioni dei cookie o ottenere ulteriori informazioni qui: Politica dei cookies.