Semplice preload di immagini

**zannas** · 30-08-2006, 11:01

Scusate scusate e ancora scusate se riposto una cosa che avrete discusso 2000 volte. Io ho una semplice lista di immagini. Voglio che mentre il client carica un'immagine ne venga fatta vedere un'altra al posto di quella in caricamento. Poi a caricamento completato l'immagine prenda il posto di quella del caricamento. Come cacchio si fà???

**zannas** · 30-08-2006, 11:30

allora, io mi son buttato su ajax e ho provato così, ma qualcosa mi sfugge e infatti non sembra funzionare:

codice:

function loadimg (riferimento,src) {
	rif = document.getElementById(riferimento);
	
	XMLHttp=null
	
	try {
		(XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"))
	} catch(e) {
		try {
			(XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")) }
		catch(e) {
			XMLHttp=new XMLHttpRequest();
		}
	}
	
	XMLHttp.onreadystatechange = handler;
	XMLHttp.open("GET",src);
	XMLHttp.send(null);
}


function handler() {
	if(XMLHttp.readyState > 1 and XMLHttp.readyState < 4) {
		rif.src = 'img/indicator_arrows.gif';
	} else if (XMLHttp.readyState == 4) {
		rif.src = src;
	}
}

nella pag html si dovrebbe usare:
[img]url_img_da_caricare.jpg[/img]
qualcuno sà aiutarmi?

**zannas** · 30-08-2006, 15:27

allora, pian piano sto risolvendo. Innanzitutto il tag img non supporta l'onload quindi devo appoggiarmi per forza a uno script con all'interno:

onload = loadimg('thumb');

thumb è l'inziale di ogni id di ogni immagine. Ricordo che ho una serie di immagine, immaginatevi un html del tipo:

<img id="thumb115" ....
<img id="thumb523" .......
<img id="thumb54567" .......

insomma...con la funzione ho in mente di prendere tutte le immagini che hanno l'id che inizia con thumb e da lì con ajax dovrei uscirne.

Questo ora il problema. Come faccio a recuperare tutte le immagini con id="thumb****" ???

**pietro09** · 30-08-2006, 15:33

non so per altri browser, ma IE6, Firefox 1.5, Opera 8, supportano l'evento load per le immagini:

così per esempio
img[0] = newImage("img000.jpg"); img[0].onload = function(){....

**whisher** · 30-08-2006, 16:49

Ciao.
Puoi fare in questo modo:

Codice PHP:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="JavaScript" type="text/JavaScript">

var mythumbs = new Array();

function getImg()

{

var img = document.getElementsByTagName("img");

var string = "";

var index = 0;

for(i = 0; i < img.length; i++)

{

    string = img[i].getAttribute("id")

    if(string.indexOf("thumb")!=-1)

    {

         mythumbs[index] = string;

        index++;

    }

}



}

window.onload = function()

{

getImg();

alert(mythumbs);

}

</script>



</head>



<body>

[img][/img]

[img][/img]

[img][/img]

[img][/img]

[img][/img]

[img][/img]

[img][/img]

[img][/img]

</body>

</html>

**zannas** · 31-08-2006, 15:54

allora, ho letto un pò in ritardo la tua risp e mi sono arrangiato, in modo diverso ma il succo è sempre quello....anzi sono andato avanti ma ho qualche problema con lo scope di variabili e array. Sperando che possiate darmi una mano:

codice:

// JavaScript Document
function loadimg (riferimento) {
	var all_images = document.getElementsByTagName('img');
	var thumb = new Array();
	var src_originale = new Array();
	var XMLHttp=null;
	
	espressione = new RegExp('^'+riferimento);
		
	for (i = 0; i < all_images.length; i++) {
		if	(espressione.test(all_images[i].id)) {
			thumb.push(all_images[i]);
			src_originale.push(all_images[i].src);
		}
	}
	
	for (n = 0; n < thumb.length; n++) {
	
		try {
			(XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"))
		} catch(e) {
			try {
				(XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")) }
			catch(e) {
				XMLHttp=new XMLHttpRequest();
			}
		}
		
		thumb[n].src = 'img/indicator_arrows.gif';
		
		XMLHttp.onreadystatechange = function () {
		switch (XMLHttp.readyState) {
			case 0:
				alert('errore');
			break;
			case 1:
			break;
			case 2:
			break;
			case 3:
			case 4:
				thumb[n].src = src_originale[n];
			break;
		}
		}	
	XMLHttp.open("GET",src_originale[n]);
	XMLHttp.send(null);
	}
}

onload = loadimg('thumb');

volevo chiedere inoltre una cosa:
1 - ma questo script in modo che prenda tutte le immagini da me scelte, deve essere messo nell'head del documento o dopo che sono state stampate a video tutte le img?
2 - perchè il motore js mi da errore su thumb[n].src = src_originale[n]; linea 42? mi dice che non ha proprietà

**zannas** · 31-08-2006, 16:07

mi rispondo alle 2: l'errore accade perchè siamo in un'altra funzione. Quindi ho modificato così ma ora mi fa sempre l'alert con scritto errore!!! Datemi una mano...

codice:

{....
XMLHttp.onreadystatechange = handle_loadimg(XMLHttp,thumb,src_originale,n);
....
}

function handle_loadimg(xmlhttp,array_thumb,array_src_originale,i) {
	var XMLHttp = xmlhttp;
	var thumb = array_thumb;
	var src_originale = array_src_originale;
        var n = i;
	switch (XMLHttp.readyState) {
		case 0:
			alert('errore');
		break;
		case 1:
		break;
		case 2:
		break;
		case 3:
		case 4:
			thumb[n].src = src_originale[n];
		break;
	}
}

**whisher** · 31-08-2006, 17:01

Su due piedi :

Codice PHP:


for (n = 0; n < thumb.length; n++) {

    

        try {

            (XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"))

        } catch(e) {

            try {

                (XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")) }

            catch(e) {

                XMLHttp=new XMLHttpRequest();

            }

        }

Cosa ci fà una XMLHttpRequest(); dentro ad un ciclo.
Ad occhio e croce mischi le cose se non hai una pagina da richiamare
cosa usi a fare Ajax secondo me puoi risolvere solamente con js
se non sbaglio in qc script ho visto usare seTimeOut() per quello
che vuoi fare.

**zannas** · 31-08-2006, 22:28

Originariamente inviato da whisher
Cosa ci fà una XMLHttpRequest(); dentro ad un ciclo.

ammazza hai ragione....questo è un errore grossolano...
cmq il timeout non mi serve. Lo script funzionante per una immagine l'ho fatto, poi partendo da quest'ultimo lo sto modificando per più immagini ma non funziona + e non capisco dove sbaglio.

Inaftti con una immagine non vi era alcun tipo di ciclo.

**zannas** · 01-09-2006, 22:05

ho corretto il problema sopra citato. Risultato? Nessun Cambiamento... Ho però la funzione iniziale per una immagine. Funzionante!!! ma con il difetto che mi mostra l'alert('ci sono arrivato'); da 3 a 10 volte.... nn capisco il perchè sinceramente. Comunque....visto che questa funzione và....come si fa a fare la stessa cosa solo per una serie di immagini contenute in un array????
Aspetto la risposta di qualche esperto

Codice PHP:


function loadimg_unica(id,src_da_caricare) {

    

    var img = document.getElementById(id);

    img.src = 'img/indicator_arrows.gif';

    

    XMLHttp.onreadystatechange = function () {

        switch (XMLHttp.readyState) {

        case 0:

            alert('Errore, contatta Zannas');

        break;

        case 1:

        break;

        case 2:

        break;

        case 3:

        case 4:

            alert('c sono arrivato');

            if (XMLHttp.status==200) {

                img.src = src_da_caricare;

            }

        break;

    }

    }

    XMLHttp.open("GET",src_da_caricare,true);

    XMLHttp.send(null);

}

ovviamente con all'esterno

Codice PHP:


var XMLHttp = null;



try {

    (XMLHttp=new ActiveXObject("Msxml2.XMLHTTP"))

} catch(e) {

    try {

        (XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")) }

    catch(e) {

        XMLHttp=new XMLHttpRequest();

    }

}

Discussione: Semplice preload di immagini

Strumenti discussione

Ricerca discussione

Visualizza

Semplice preload di immagini

............

..............

Re: ..............

Permessi di invio