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.

Cercare immagini per somiglianza

(No Ratings Yet)

 Loading ...

Posted by raphe | Filed under Motori di ricerca

Non molto tempo fa ho segnalato un tool che permetteva di trovare canzoni canticchiandole. Come in quel caso, anche oggi, ho scoperto un sito che non è per niente nuovo e del quale già si parla molto sul web, ma che voglio comunque segnalarvi.

TinEye (reverse image search engine) è un motore di ricerca che permette di trovare immagini a partire da una segnalata da voi. Potete uploadare un’immagine o inserirne l’url e il sistema troverà tutte le immagini “simili” presenti sul web. Ho fatto qualche prova e i risultati sono ottimi.

Non solo keyword per cercare immagini…

(No Ratings Yet)

 Loading ...

Posted by redsend | Filed under Motori di ricerca, Varie

xcavator.net è un nuovo motore di ricerca per immagini, permette la ricerca in base ad una keyword…vi starete chiedendo cosa ha di diverso da un Google Image, Filckr etc… bè la particolarità sta nel fatto che può effettuare una ricerca delle immagini in funzione del colore scelto nelle impostazioni o inviare la foto da cercare nel database che ne dovrebbe contenere più di 10 milioni.

Ecco uno screenshot della pagina in cui potete effettuare la ricerca

Come potete vedere in alto a sinistra è presente un selettore del colore in base al quale verranno filtrate le immagini ricercate attraverso una keyword che si inserisce in alto a destra.