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

jQuery: consigli e trucchi utili per migliorare le performance di un sito web
by Janeth Kent Date: 28-10-2015 jquery trucchi javascript webdev

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);  
});
<!-- Create an anchor tag -->  <a class="top" href="#">Back to top</a>

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++) {      
$('<img>').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();
 
by Janeth Kent Date: 28-10-2015 jquery trucchi javascript webdev visite : 4485  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Articoli correlati

JQuery morirà nel 2019?

Per un po' di tempo, la centralità di JQuery è stata oggetto di dibattito tra gli sviluppatori web. Come programmatori web interessati a Javascript, eravamo curiosi di sapere che opinioni…

Google Maps: i migliori trucchi per padroneggiare l'applicazione in Android

Le numerose funzionalità e opzioni disponibili su Google Maps potrebbero farvi pensare che sia un'applicazione difficile da gestire, ma nulla potrebbe essere più lontano dalla verità. Google ha sviluppato uno…

30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

Le migliori librerie JavaScript del 2018

Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

Introduzione a React: la prima libreria JavaScript costruita per sviluppatori frontend

React è una libreria JavaScript, creata da Facebook e Instagram, che permette di creare delle interfacce utente complesse grazie alla suddivisione in diversi componenti. React supporta la definizione di modelli HTML per ciascun componente attraverso un…

10 plugins Jquery per personalizzare la Scrollbar

Sempre piú spesso abbiamo necessitá di modificare e personalizzare la barra di scorrimento laterale o la cosidetta scrollbar della nostra pagina web, affinché si adatti al look & feel globale. Si…

Parallax Scrolling: 16 esempi e tutorial

La parallasse è, come recita Wikipedia, il fenomeno per cui un oggetto sembra spostarsi rispetto allo sfondo se si cambia il punto di osservazione. Il parallax scrolling (effetto parallasse) è una tecnica particolare di scorrimento…

jQuery: Tutorial, Video, E-Books gratis e risorse

Oggi vi presentiamo una serie di tutorial,video e risorse gratis pensate per coloro che vogliono imparare ad utilizzare jQuery. Si tratta di tutorial risorse utili per chi parte da zero o…

20 Cheat Sheets per sviluppatori web

I cheat sheet sono una risorsa utilissima per gli sviluppatori poiché consentono di avere a portata di mano una lista completa di tutte o quasi tutte le funzioni e la…

11 Plugins per creare slide sidebar panel con jQuery

Gli slider jQuery sono ottimi quando dobbiamo visualizzare contenuti web in modo accattivante ed innovativo. Di seguito vi offriamo una raccolta di 11 plugins, per realizzare delle originali e pratichejQuery…

Clicky