Cambio immagine senza refresh continuo

Dopo esser riuscito ad aggiungere l'immagine al profilo creato da me, vorrei sapere se esiste un modo per far si che al cambio di immagine, questi cambi istantaneamente, e non quando faccio il reload della pagina manualmente, però non vorrei un refresh continuo.

Tu vorresti che, cambiando l'immagine, si aggiorna solo quella e non venga fatto un refresh della pagina?

esatto! Perché per notare la modifica devo fare il refresh manualmente. Praticamente vorrei fare un po come quella di facebook.

Beh, allora ti consiglio qualche guida per prendere spunto
Dal forum: [jQuery/Ajax]Aggiornare il contenuto di un div

Da siti in rete: Sito #1
Sito #2

Credo facciano al caso tuo

Fammi sapere, anche perché a breve dovrei lavorare anche io a una cosa simile

Ciao australiafever, è una cosa teoricamente banale, mentre nella pratica da un po di problemi. In teoria infatti potresti semplicemente ricaricare l'immagine ogni x secondi, con un semplice javascript, questo però consumerebbe una quantità ASSURDA di connessione (agli utenti) e di banda (a te). Non puoi neanche far eseguire una query che controlla nel database se è cambiata l'immagine perché esploderebbe il database (xD). Quello che puoi fare per bruciare il meno possibile è creare un file che si chiama per esempio immagineNomeUtente.txt. All'interno del file inserisci semplicemente "0". Quando l'utente cambia immagine di profilo, fai cambiare quel file a "1". In questo modo ajax può richiamare ogni x secondi il file immagineNomeUtente.txt, che sarebbe specifico per ogni utente, se vede che il contenuto è 0 lascia stare, se è 1 ricarica l'immagine. Questo è il metodo migliore secondo me.

Diciamo che è il metodo migliore, battuto solo dall'uso dei websocket. Per usarli però avrei bisogno di capire perfettamente come funzionerebbe il cambio dell'immagine.

[alemoppo]

In teoria infatti potresti semplicemente ricaricare l'immagine ogni x secondi, con un semplice javascript, questo però consumerebbe una quantità ASSURDA di connessione (agli utenti) e di banda (a te).

A me risulta che i browser hanno la cache.

Non puoi neanche far eseguire una query che controlla nel database se è cambiata l'immagine perché esploderebbe il database (xD). Quello che puoi fare per bruciare il meno possibile è creare un file che si chiama per esempio immagineNomeUtente.txt. All'interno del file inserisci semplicemente "0". Quando l'utente cambia immagine di profilo, fai cambiare quel file a "1". In questo modo ajax può richiamare ogni x secondi il file immagineNomeUtente.txt, che sarebbe specifico per ogni utente, se vede che il contenuto è 0 lascia stare, se è 1 ricarica l'immagine.

Ma i database non li hanno inventati perché son più veloci ed ottimizzati invece dei txt?


Tornando al problema

vorrei sapere se esiste un modo per far si che al cambio di immagine, questi cambi istantaneamente, e non quando faccio il reload della pagina manualmente, però non vorrei un refresh continuo.

Presumo che il numero delle immagini sia un numero finito, e che le immagini siano tutte a conoscenza prima del caricamento della pagina. Io farei in questo modo:

Innanzitutto immagino che il "cambio immagine" sia gestito via javascript, quindi assumiamo che per un utente che non supporta javascript, ci sia un sistema alternativo che fa refreshare la pagina.
Per il cambio istantaneo, occorre che le immagini vengano prima precaricate. Tempo fa avevo provato questa cosa e funzionava: in pratica per precaricare le immagini devi creare un'immagine via javascript e caricarla in questo modo:

immagine = new Image();
	immagine.src = <percorso>;
	immagine.onload = function() {
		//qui l'immagine è stata caricata.
	}

Sopra ho scritto che si presume di conoscere tutte le immagini, così da creare un array con tutti i percorsi delle immagini, quindi quando si visita la pagina, questa inizia a precaricare tutte le immagini.

Prova a vedere come cambia il tempo di caricamento nella pagina che ti ho linkato, premendo prima "carica" e poi mostrando l'immagine, oppure mostrando l'immagine direttamente.
(p.s: nota che una volta che le hai precaricate, anche se refreshi la pagina, le immagini dovrebbero apparire comunque velocemente anche senza ri-precaricarle, perché il browser le ha salvate in cache).

Ciao!

Chiedevo come cambia l'immagine proprio per quello...perché se io sono nel mio profilo e cambio l'immagine, posso farla cambiare lato client con del semplice javascript e tanto le altre pagine cambieranno visto che per accedervi devo caricarle e quindi interverrebbe php

Per ora l'immagine è unica per ogni utente, cioè quando quest'ultimo va a cambiare la sua immagine profilo questa sovrascrive quella precedente, in pratica ha sempre lo stesso nome, quindi penso che forse è per questo motivo che devo aggiornare la pagina manualmente, a me servirebbe solo un modo per fare il refresh del div una volta cliccato su modifica immagine.

Ho provato a vedere questo:

function check_msg()
( 
    $.ajax({
       type : /* tipo richiesta ( get o post ) */,
       data: /* se devi passare qualche parametro alla richiesta */,
       url; "new_msg.php",
       success: function(result)
       {
            if (result != "") {
               $("#msg").html(result);    
            }
       }
    });
}

ma da errore nella parentesi sotto function.

Crea una pagina tipo immagineProfilo.php. In questa pagina scrivi:

<?php
//Evita che il browser salvi in cache
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");
//stampa l'immagine
header('Content-Type: image/jpeg');
#quì ovviamente dovrai fare elaborare in maniera dinamica a php l'url del file visto che cambia da utente a utente
readfile('indirizzo_immagine_personale');
?>

A questo punto quando l'utente cambia immagine, tu fai con javascript:

document.getElementById('idImmagine').src="immagineProfilo.php?rand="+rand;

rand deve essere una stringa che elabori quando cambi l'immagine.
L'uso di rand è un trucco per far credere al browser che l'immagine sia diversa (se facessi sempre immagineProfilo.php non l'aggiornerebbe visto che è la stessa).

Ho provato ma non va.

[alemoppo]

<img src="immagine.png" onclick="this.src='immagine.png?r='+Math.random();">

Ciao!

australiafever posta il link dove hai provato così ci guardo

Posterei anche il link ma ti devi iscrivere per accedere al profilo, e non riguarda il mio sito direttamente.

non c'è problema

[alemoppo]

Quello che ho scritto funziona?/è quello che vuoi?

Ciao!

Si ora funziona tutto, ma ho cambiato sistema, come ho scritto anche nella sezione PHP MySQL, ed usando il database si aggiorna automaticamente. Grazie ancora.