Come fare caching di immagini con jquery

(No Ratings Yet)

 Loading ...

Posted by raphe | Filed under Appunti, Programming

In giro per la rete è pieno di tutorial su come si possano cachare le immagini utilizzando javascript. Nessuno dei tutorial che ho letto in questi giorni però prende in considerazione il fatto che nel frattempo javascript e il web si siano evoluti e che quindi, con l’utilizzo di ajax, spesso si visualizzano porzioni di pagina, precedentemente visualizzate, senza effettuare il reload della pagina.

Perché questa introduzione? Perché proprio il caso sopra citato manda a farsi friggere tutti i metodi di caching classici.

Vediamo quindi come sfruttare jquery e il metodo load per generare un evento ogni volta che una immagine viene visualizzata.

(function($) {
var cache = [];
$.preLoadImages = function() {
var args_len = arguments.length;
for (var i = args_len; i–;) {
var cacheImage = document.createElement(‘img’);
cacheImage.src = arguments[i];
cache.push(cacheImage);
}
}
})(jQuery)

Con questa prima funzione iniziamo la procedura di cache delle immagini. E’ importante notare che la variabile cache sia globale, questo permette che il garbage collection di alcuni browser non cancellino le variabili non utilizzate.

$(“#loader”).fadeIn();

var imgsNumber = 0;

$(“#container img”).each(function(){
jQuery.preLoadImages(this.src);
var img = new Image();
$(img).load(function(){
imgsNumber++;
if(imgsNumber == $(“#container img”).length){
imgsNumber = 0;
$(“#loader”).fadeOut(“slow”, function(){
$(“#container”).css(“visibility”, “visible”).fadeIn();
});
}
}).attr(“src”,this.src);
});

Questa funzione è un po’ più complessa e funziona in questo modo:

• mostra un loader (ovviamente il div #loader va sostituito con il vostro div);
• imgsNumber conta il numero di immagini caricate (è essenziale per sapere quando sono tutte caricate);
• il pezzo di codice successivo invece scorre tutte le immagini nel blocco #container e per ognuna di esse creiamo un oggeto img al quale assegniamo l’immagine. Questo è il passo essenziale per risolvere il problema di cui sopra visto che, in questo modo l’evento load verrà generato anche se l’immagine è già in cache. In questo modo si riesce a contare il numero di immagini caricate e mostrarle quando sono tutte pronte;
• la parte finale (fadeOut e css) si occupano proprio di nascondere il loader e mostrare il div in questione;
• la chiamata alla funzione attr si occupa infine di assegnare il path dell’immagine all’oggetto img temporaneamente creato.

Questo è quanto. Se avete dubbi chiedete nei commenti.

Tags: immagini > javascript > jquery > load > Programming

Bypassare il problema dell’asincronia di javascript

(No Ratings Yet)

 Loading ...

Posted by redsend | Filed under Programming

Vi sarà sicuramente capitato, programmando in javascript, di affrontare l’annoso problema delle chiamate asincrone tipiche di questo linguaggio. Ad esempio io e il mio amichetto mentre giocavamo con le funzioni jquery, in particolare quelle relative al dialog (vedi esempi),  ci siamo trovati difronte a questo problema:

Codice Javascript

$(‘button’).bind(‘click’,FUNZIONCINA);

function FUNZIONCINA(){
$(‘dialog’).dialog();
}

Questo codice non funziona.

Il problema è dovuto al fatto che al momento del click su “button” viene lanciata FUNZIONCINA e viene subito conclusa, senza attendere un eventuale click sul dialog. Ovviamente in questo modo si perde l’utilità dei dialog perché non si può catturare la scelta dell’utente.

Qualcuno in giro per il web propone di utilizzare estensioni di javascript (tipo narrativejs) che aggiungono proprietà bloccanti al linguaggio.

Un modo più immediato di risolvere il problema è utilizzare la funzione setTimeout sulla chiamata alla funzione che nel normale flusso viene terminata con la conclusione della funzione madre. Per intenderci il nostro codice che prima non funzionava diventa:

Codice Javascript

$(‘button’).bind(‘click’,FUNZIONCINA);

function FUNZIONCINA(){
setTimeout(function(){$(‘dialog’).dialog();}, 0};
}

Tags: asincronia > dialog > javascript > jquery > narrativejs > settimeout

Caratteri speciali & codifiche su php, mysql e javascript: la soluzione definitiva

(1 votes, average: 5,00 out of 5)

 Loading ...

Posted by raphe | Filed under Appunti, Programming

Il titolo del post è un po’ caotico ma non avevo idea di come scrivere qualcosa di più esplicativo.
Come per i post relativi alle sessioni, anche questo post ha l’obiettivo di essere un appunto per me per il futuro e un riepilogo di cose conoscenze acquisite nel tempo.

Dimentichiamoci delle funzioni htmlspecialchars, htmlentities, html_entity_decode, addslashes, escape, encodeURI, ecc…con una buona configurazione dei vari componenti potremo lavorare in modo trasparente!

Un po’ di teoria

La questione “caratteri speciali” è ben nota a chi si trova a sviluppare per il web, in giro per la rete ci sono centinaia di blog, forum e siti che suggeriscono modi per mostrare al meglio i caratteri accentati e ogni tipo di entità html. La difficoltà sta quasi sempre nell’uso di diverse codifiche nei vari componenti coinvolti (linguaggi di programmazione, database, browser, ecc.). Come prima cosa è bene, quindi, decidere all’inizio quale codifica utilizzare e portare avanti questa scelta in tutti i settaggi che verranno fatti in futuro.

UTF-8 è la codifica che andremo ad utilizzare (dato l’elevato numero di caratteri rappresentabili) ma il discorso vale per qualsiasi codifica vogliate usare.

Innanzitutto è bene sapere che anche i linguaggi di programmazione hanno diversi modi di rappresentare e gestire i caratteri speciali. Ne consegue che ad ogni passaggio da db a linguaggio e da linguaggio a browser si debbano fare delle conversioni. A questo proposito esistono numerose funzione di encoding e decoding in php, js, ecc.

Questa operazione è macchinosa e non scalabile (ci si deve ricordare ogni volta di convertire tutti i dati in transito). L’approccio che presenterò in questo post è diverso: utilizziamo i caratteri speciali per come sono senza convertirli in nessun modo utilizzando solo qualche settaggio e molta attenzione.

Passiamo alla pratica

Innanzitutto è bene iniziare con il database. Nel nostro caso stiamo lavorando su mysql quindi ricordiamoci di creare il database sul quale lavoreremo con collation utf8_general_ci (o altri tipi di utf8), di settare lo stesso valore anche per:

• connessione mysql;
• ogni tabella creata;
• ogni campo testuale di ogni tabella.

Dopo questo passo sappiamo per certo che il database è pronto a gestire dati UTF-8.

Ovviamente dovremo ora comunicare con il database. Per questo esempio utilizzerò la libreria PEAR::MDB2 (consiglio a tutti di lavorare con qualche libreria e non a mano, per avere alcuni automatismi e funzionalità aggiuntive). Nel caso di MDB2 dovremo solo ricordarci di settare il charset sulla connessione al db al primo utilizzo, con il seguente metodo:

$mdb2->setCharset(‘utf8′);

Ora sappiamo che ogni comunicazione (lettura e scrittura) con il database avverrà utilizzando utf8.

Fase seguente è l’inserimento dei dati da parte dell’utente. Ovviamente, come detto sopra, se codifichiamo i dati che l’utente inserisce dovremo poi decodificarli ad ogni utilizzo. Noi non lo faremo. Lasciamo inserire all’utente ogni tipo di carattere (àé!’^$%…) e mettiamolo in database “senza toccarlo”, possiamo farlo perché le tabelle e la connessione in utf-8 ce lo permettono.

Fatto questo nel database avremo i caratteri veri e propri e sarà più facile gestire la fase di visualizzazione. Proprio quest’ultima di solito crea problemi di conversione, soprattutto quando si lavora con javascript che codifica i caratteri speciali in modo diverso dalle entità html.

In fase di visualizzazione dovremo assicurarci che le pagine html generate abbiano anche esse la codifica settata ad utf-8 con l’utilizzo del tag meta, in questo modo:

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

Il testo estratto dal database sarà quindi mostrato direttamente nella pagina che, usando charset utf-8, mostrerà i caratteri speciali senza problemi.

Lo stesso vale se questi dati vengono passati a funzioni javascript per elaborarli o mostrarli: non sarà necessario nessuna chiamata a funzioni di decodifica perché javascript è in grado di visualizzare i caratteri speciali se passati esplicitamente.

Prima di concludere è  importante dire qualcosa relativa al fatto di lasciare inserire all’utente tutti i caratteri che vuole. Questo potrebbe essere un baco di sicurezza per la possibilità di inserire codice malevolo o tentare sql injection. Dal punto di vista delle injection saremo protetti dalla libreria in uso (perciò dovreste usarne una) che si occuperà di gestire le query in ingresso al meglio con opportuni escape – quando necessari – e uso di altre protezioni. Ciò significa che non dovremo fare l’escape di caratteri potenzialmente pericolosi come apice singolo (‘) o doppio apice (“), né lasciarlo fare ad apache. Un escape di questo tipo richiederebbe, infatti, l’unescape al momento della lettura di tutti dati e non avremmo risolto niente.

Per evitare che apache faccia l’escape automatico settiamo nel file php.ini tutte le direttive relative a magic_quotes a Off. In particolare:

magic_quotes_gpc = Off

A questo punto l’ultima cosa che ci resta da fare è evitare che l’utente inserisca codice malevolo nel database. Questo possiamo realizzarlo tranquillamente con l’utilizzo della funzione strip_tags di php. Ad ogni query di inserimento chiamiamo questa funzione che pulirà il testo dai tag inseriti. In visualizzazione non dovremo fare nulla…che era proprio il nostro obiettivo.

Tags: Appunti > caratteri speciali > codifica > entità > html > javascript > mysql > php > Programming > utf-8