Visualizzazione risultati 1 fino 8 di 8

Discussione: Loading che precede la comparsa di un immagine

  1. #1
    bcprojects non  connesso Utente AlterBlog
    Data registrazione
    21-09-2017
    Messaggi
    32

    Predefinito Loading che precede la comparsa di un immagine

    Ho dei tasti che cliccandoli fanno apparire una nuova immagine, il problema che a volte queste immagini ci impiegano un p prima di apparire dando l'impressione che il comando non sia partito. Vorrei fare in modo che appaia un loading nel frattempo che l'immagine si carica, come potrei fare? grazie

  2. #2
    L'avatar di alemoppo
    alemoppo non  connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,554

    Predefinito

    Potresti provare impostando come background del contenitore dell'immagine l'immagine di attesa.

    Ciao!

  3. #3
    bcprojects non  connesso Utente AlterBlog
    Data registrazione
    21-09-2017
    Messaggi
    32

    Predefinito

    Citazione Originalmente inviato da alemoppo Visualizza messaggio
    Potresti provare impostando come background del contenitore dell'immagine l'immagine di attesa.

    Ciao!
    E' una soluzione che non posso adottare perch l'immagine non che appare/scompare su un riquadro vuoto, ma va a sostituire un immagine gia presente...

  4. #4
    L'avatar di alemoppo
    alemoppo non  connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,554

    Predefinito

    Potresti adottare questa soluzione, ovvero mostrare l'immagine di loading, per poi nasconderla all'onload dell'elemento dell'immagine.

    Ciao!

  5. #5
    bcprojects non  connesso Utente AlterBlog
    Data registrazione
    21-09-2017
    Messaggi
    32

    Predefinito

    Grazie, quello che sto cercando ma non riesco a capire bene come va applicato, puoi aiutarmi?

  6. #6
    L'avatar di alemoppo
    alemoppo non  connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,554

    Predefinito

    Cosa non hai capito? Ho fatto un esempietto:
    Codice HTML:
    <!doctype html>
    <html>
    <head>
    <title> test caricamento immagine </title>
    <style>
    img{
    	width:100px;
    	height:100px;
    	display:none;
    }
    div
    {
    	margin: 0px;
    	width:100px;
    	height:100px;
    	border: 1px solid red;
    }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $( document ).ready(function() {
    	$('#loader_img').show();
    
    	// main image loaded ?
    	$('#main_img').on('load', function(){
    	  // hide/remove the loading image
    	  $('#loader_img').hide();
    	  $('#main_img').show();
    	});
    });
    </script>
    </head>
    <body>
    <div>
    	<img src="immagine.php" id="main_img">
    	<img src="loading.gif" id="loader_img">
    </div></body>
    </html>
    p.s: nota che il caricamento lento dell'immagine voluto.

    Ciao!

  7. #7
    bcprojects non  connesso Utente AlterBlog
    Data registrazione
    21-09-2017
    Messaggi
    32

    Predefinito

    Provato ma non funziona... praticamente all'inizio quando viene caricata l'immagine di default vedo a video sia l'immagine di loading che quella di default. mentre quando clicco su un tasto per far apparire una nuova immagine, quella di loading semplicemente scompare senza svolgere la sua funzione di "caricamento".

  8. #8
    L'avatar di alemoppo
    alemoppo non  connesso Staff AV
    Data registrazione
    24-08-2008
    Residenza
    PU / BO
    Messaggi
    10,554

    Predefinito

    Beh dipende tutto da come impostato sia lato css sia con gli eventi javascript.


    Devi fare in modo che alla pressione del tasto di caricamento nuova immagine, venga nascosto il contenitore del'immagine e mostrato quello dell'immagine di caricamento. Una volta caricato fai il contrario, come ti ho indicato.

    Ciao!

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •