PDA

View Full Version : [Javascript] Problema selezione immagini casuale


majowski86
26-11-2010, 10:16
Ciao a tutti.
Ho sviluppato per un sito eprsonale la seguente funzioncina:

function put_random_image()
{
var hiddenValue = document.getElementById('ctl00_PhotoUC_ImagesHidden').value;
fileList = new Array();

var i = 0;
var ind = 0;
var index = 0;

while (true)
{
index = hiddenValue.indexOf(';', ind)
if (index == -1)
break;

fileList[i] = hiddenValue.substring(ind,index);
i++;
ind = index + 1;
}

var randValue = Math.floor(Math.random() * (i + 1));

if (randValue > (fileList.length - 1))
randValue = (fileList.length - 1);

document.getElementById('PhotoUcImage').setAttribute('src', fileList[randValue]);
//alert(fileList[randValue]);
}

In sostanza al caricamento di una pagina ASPX, vado a popolare il contenuto di un campo hidden con l'elenco dei file jpeg presenti in una cartella specifica. poi da questo javascript metto in un array le varie imamgini, scelgo un'immagine random e la vosualizzo. Il mio problema ora è il segiente:

Il javascript a livello teorico finziona alla grande, andando in debug vedo che assegna correttamente all'array tutti i file, ne sceglie uno a caso, quindi aggiorna il parametro src dell'immagine. Quello che invece capita è che solo alcune di queste immagini, quando vengono scelte, aggiornano veramente l'immagine lato client, e sono sempre le stesse immagini, mentre le altre non vanno mai. Ho verificato i path e sono corretti, le imamgini sono tutte jpeg, stesse dimensioni ecc.. non riesco a capire per chè certe vengono visualizzate e altre no.. Un'altra cosa strana è che con lo stesso path ripreso dal javascript se metto un tag <img> normale all'intenro della pagina l'immagine viene visualizzata correttamente, anche se la stessa immagine non appare se uso la funzione sopra.
Qualcuno mi può aiutare?

MEMon
26-11-2010, 11:34
Ciao, un ciclo while fatto in quel modo non si può vedere :D , tra l'altro c'è una funziona apposta per fare quel lavoro, String.split.

Detto questo comunque sembra tutto apposto, magari cancella la cache del browser.

Le immagini che non caricano hanno circa la medesima dimensione delle altre vero? non è che sono n-mila MByte di immagine :asd:

majowski86
26-11-2010, 12:04
Ciao, un ciclo while fatto in quel modo non si può vedere :D , tra l'altro c'è una funziona apposta per fare quel lavoro, String.split.

Detto questo comunque sembra tutto apposto, magari cancella la cache del browser.

Le immagini che non caricano hanno circa la medesima dimensione delle altre vero? non è che sono n-mila MByte di immagine :asd:

Sono daccordo sul while e sul split, ma ho trovato la funzione così come la vedi e l'ho inserita nel sito per provare se funziona. Non ho idea di chi l'abbia fatta. La sto già sistemando e adattando ulteriormente per quello che mi serve prima di mettere su il sito.

Cmq (e qui c'è da farsi delle grasse risate) ho notato che a seconda del software usato per salvare le imamgini in quiestione (tutti jpeg ottenuti da raw) funzionano o meno all'intenro del javascript. I file salvati con photoshop funzionano, quelli salvati con picasa e modificati con paint.NET no. Non mi spiego questa differenza, visto che le stesse immagini messe in un normale tag img funzionano bene, ma da questo js no. e per quanto può sembrare assurdo giuro che è così. Ho provato ad aprire una delle immagini che funzionano con picasa e salvarla con la stessa estensione e nome diverso. Risultato? mettendola direttamente in un tag img funziona, se viene selezionata dal js no..
Le immagini sono della stessa dimensione.

Cmq ci rinuncio a capire il perchè faccia così, rimetto a posto la funzione e evito di salvare le foto con picasa..



EDIT:
Ecco come si presenta corretta un pochino:

function put_random_image()
{
var hiddenValue = document.getElementById('ctl00_PhotoUC_ImagesHidden').value;

fileList = new Array();
fileList = hiddenValue.split(';');

var randValue = Math.floor((Math.random() * 1000) % (fileList.length));

if (randValue > (fileList.length - 1))
randValue = (fileList.length - 1);

document.getElementById('PhotoUcImage').setAttribute('src', fileList[randValue]);
//alert(fileList[randValue]);
}

MEMon
26-11-2010, 12:58
L'elemento con id "PhotoUcImage" come si presenta realmente? Hai provato a inserire le immagini che nn vanno a mano propri in quell'elemento?

Hai provato a metterle come background di un div?

Fai anche questa prova:

function put_random_image() {
var hiddenValue = document.getElementById('ctl00_PhotoUC_ImagesHidden').value;
fileList = new Array();
fileList = hiddenValue.split(';');
var randValue = Math.floor((Math.random() * 1000) % (fileList.length));
randValue = (randValue > fileList.length - 1) ? fileList.length - 1 : randValue;
Image img=new Image();
// inizia a precaricare l'img, volendo puoi anche aggiungere un evento onLoad per vedere se la carica bene
img.src=fileList[randValue];
document.getElementById('PhotoUcImage').setAttribute('src', img.src);
}

majowski86
26-11-2010, 14:11
Ciao. L'elemento con id "PhotoUcImage" non è altro un tag <img> al quale cambio il src. Ho provato a inserire le immagini che non vanno in quell'elemento direttamente all'interno della pagina asp, e vengono visualizzate correttamente, proprio per questo è tutto ancora più strano.

Ho provato con la parte di codice che mi hai scritto tu, ma mi da solo un generico errore "previsto oggetto" quando richiamo il js, senza indicarmi niente di più

ora provo ad usare il div al posto del tag img, vedo se cambia qualcosa. A questa possibiloità non ci avevo proprio pensato :)

Ti faccio sapere se cambia qualcosa, intanto grazie mille