[Javascript] galleria di immagini -> non mostrare immagine che non esiste

[ingframin]

Buona sera,
sto facendo una pagina web e mi trovo davanti al seguente problema.
Vorrei fare una galleria di immagini tale per cui; tutte le immagini disponibili al percorso "pictures/qualcosa/" vengano visualizzate.
Ora... io ho scritto questo codice javascript:


var base = "pictures/frames/";

var ind = 0;
function load_images(){
for(ind = 1; ind<11; ind++) {
var ind_str = ind.toString();
document.writeln('<img id="img_'+ind_str+ '" src="'+base+ ind_str +".jpg" +'"/><br>');


}

}


Ora fino a qui tutto bene, vedo le 10 immagini che sono nella directory.
La mia idea era di portare il for loop a tipo 100 e beccare l'errore di caricamento.
A quel punto metto un break.
Non ci saranno mai più di 100 immagini in galleria, quindi no problem per quello.

Fino ad ora ho provato senza successo:
1) try{} catch{}
2) mettere l'attributo "onerror" nel tag immagine per catturare l'vento

Considerate che sono un absolute beginner di javascript e css, quindi sono sicuro che mi sono perso qualcosa.
Non c'è un modo per acchiappare l'errore 404 quando il server risponde alla richiesta di un url sbagliato?
Lato server (tipo con una jsp o una pagina generata dinamicamente) saprei come fare, ma con Javascript non è possibile leggere il contenuto di una directory. Idee?
Devo studiarmi Ajax?
Let me know!

[wingman87]

Puoi usare l'onload che se ho capito bene (sono su tablet e non riesco a testare a fondo) non viene scatenato se l'immagine all'indirizzo specificato non esiste. Praticamente crei l'oggetto immagine, gli aggiungi un handler che la inserisce all'onload e poi setti il src. Se hai problemi più tardi provo a scrivertelo al pc :)

[ingframin]

Puoi usare l'onload che se ho capito bene (sono su tablet e non riesco a testare a fondo) non viene scatenato se l'immagine all'indirizzo specificato non esiste. Praticamente crei l'oggetto immagine, gli aggiungi un handler che la inserisce all'onload e poi setti il src. Se hai problemi più tardi provo a scrivertelo al pc :)

Ho provato così:


var base = "pictures/frames/";

var ind = 0;
function load_images(){
for(ind = 1; ind<15 ; ind++) {
var ind_str = ind.toString();
//document.writeln('<img id="img_'+ind_str+ '" src="'+base+ ind_str +".jpg" +'"/><br>');


var elem = document.createElement("img");
elem.src = base+ ind_str+".jpg";
elem.onload = render_pic(elem);


}

}
function render_pic(elem){
document.getElementById("frame_box").appendChild(elem);
}


Però ancora non funziona. È questo che intendevi o non ho capito?
Ancora però mi fa vedere le caselline vuote dell'immagine "rotta" :(

[OoZic]

Premesso che secondo me l'approccio che stai utilizzando e' sbagliato in generale, direi che la cosa piu' semplice e' utilizzare jQuery che ti espone il metodo .load() e puoi sapere se e' andato a buon fine o no.

Ovviamente si puo' fare tutto in plain Javascript ma e' molto piu' doloroso.
Se puoi aggiungere jQuery ti risparmi tanta fatica.


Es:

for (var i = 0; i < 15; i++) {
var img = $('<img />')
.attr('src', 'http://somedomain.com/image.jpg')
.load(function() {
if (!this.complete || typeof this.naturalWidth == 'undefined' || this.naturalWidth == 0) {
break
} else {
document.getElementById("frame_box").appendChild(img);
}
});
};

[ingframin]

Premesso che secondo me l'approccio che stai utilizzando e' sbagliato in generale, direi che la cosa piu' semplice e' utilizzare jQuery che ti espone il metodo .load() e puoi sapere se e' andato a buon fine o no.

Ovviamente si puo' fare tutto in plain Javascript ma e' molto piu' doloroso.
Se puoi aggiungere jQuery ti risparmi tanta fatica.


Es:

for (var i = 0; i < 15; i++) {
var img = $('<img />')
.attr('src', 'http://somedomain.com/image.jpg')
.load(function() {
if (!this.complete || typeof this.naturalWidth == 'undefined' || this.naturalWidth == 0) {
break
} else {
document.getElementById("frame_box").appendChild(img);
}
});
};



Grazie della dritta. Mi puoi anche spiegare dove sbaglio? Perché se non capisco il problema prima o poi ci ricapiterò. :(
Quello che ho capito è che come faccio io "scrivo" nella pagina il tag per caricare l'immagine e non ho quindi nessunq chance dal javascript di capire che è successo perché quando l'immagine è caricata, il javascript è già terminato da un pezzo.
Quello che invece dovrei fare è caricare l'immagine e se il caricamento è andato a buon fine inserirla nella pagina web.
Come diavolo si fa? :muro:

[wingman87]

Ho provato così:


var base = "pictures/frames/";

var ind = 0;
function load_images(){
for(ind = 1; ind<15 ; ind++) {
var ind_str = ind.toString();
//document.writeln('<img id="img_'+ind_str+ '" src="'+base+ ind_str +".jpg" +'"/><br>');


var elem = document.createElement("img");
elem.src = base+ ind_str+".jpg";
elem.onload = render_pic(elem);


}

}
function render_pic(elem){
document.getElementById("frame_box").appendChild(elem);
}


Però ancora non funziona. È questo che intendevi o non ho capito?
Ancora però mi fa vedere le caselline vuote dell'immagine "rotta" :(

L'idea era questa però avresti dovuto invertire l'assegnazione del src e dell'onload perché come l'hai scritto potrebbe succedere che l'evento load sia già stato scatenato prima di assegnare l'handler. Comunque se vedi le caselline rotte vuol dire che non ha funzionato... Oggi al lavoro provo e ti dico.

[MicheleRaponi]

Come già suggerito, l'approccio non è correttissimo: su richiesta effettuata lato client è il linguaggio lato server dovrebbe interrogare la directory ed esporre il contenuto che in questo caso è l'elenco dei file di tipo immagine. E' poi compito del client presentare i contenuti richiesti.

Presupponendo:
1) che tutte le immagini siano nominate progresssivamente da 0.jpg a n.jpg
2) che tu possa utilizzare jQuery
3) che la directory del server sia "browsable"
4) che le immagini che vuoi prelevare abbiano estensione .jpg

Puoi fare così:


$(document).ready(function(){

var imgDir = "root/myImgDir/";
var fileExt = ".jpg";
var picWrapper = $("#pictures");

$.ajax({
url: imgDir,
success: function (data) {
$(data).find("a:contains(" + fileExt + ")").each(function (i) {
var fileName = i + fileExt;
picWrapper.append($("<img src=" + imgDir + fileName + "></img>"));
});
}
});

});

[wingman87]

Ho scritto questo:
http://jsbin.com/simecurojo/1/edit?html,js,output

Ho provato con il logo di hwupgrade (http://www.hwupgrade.it/css/img/logo-hwupgrade.png) e poi ho messo un indirizzo inesistente e sembra funzionare...

[MicheleRaponi]

Non c'è un modo per acchiappare l'errore 404 quando il server risponde alla richiesta di un url sbagliato?


Questo gli si avvicina: http://jsfiddle.net/q2ab5gbf/

[OoZic]

Grazie della dritta. Mi puoi anche spiegare dove sbaglio? Perché se non capisco il problema prima o poi ci ricapiterò. :(
Quello che ho capito è che come faccio io "scrivo" nella pagina il tag per caricare l'immagine e non ho quindi nessunq chance dal javascript di capire che è successo perché quando l'immagine è caricata, il javascript è già terminato da un pezzo.
Quello che invece dovrei fare è caricare l'immagine e se il caricamento è andato a buon fine inserirla nella pagina web.
Come diavolo si fa? :muro:

Ho commentato tutto

for (var i = 0; i < 15; i++) {
// una variabile 'temporanea' dove mettere l'elemento immagine per poi alla fine aggiungerlo a 'frame_box'
var img = $('<img />')
// imposta il src dell'immagine
// 'http://somedomain.com/image1.jpg',
// 'http://somedomain.com/image2.jpg' e cosi via durante il ciclo
.attr('src', 'http://somedomain.com/image' + i + '.jpg')
// controlla l'evento load che avviene quando l'immagine e' stata caricata o nn caricata
.load(function() {
// controlla se l'evento non e' stato completato oppure la larghezza e' zero o non definita
// in altre parole
if (!this.complete || typeof this.naturalWidth == 'undefined' || this.naturalWidth == 0) {
// fermati qui, vuol dire che hai gia' inserito tutte le immagini che c'eerano nella cartella
break
} else {
// altrimenti aggiunge il children al tuo elemento 'frame_box'
document.getElementById("frame_box").appendChild(img);
}
});
};