Loading che precede la comparsa di un immagine

**bcprojects** · 21-05-2018, 18.19.58

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

**alemoppo** · 21-05-2018, 18.40.34

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

Ciao!

**bcprojects** · 23-05-2018, 17.41.16

Originalmente inviato da alemoppo

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...

**alemoppo** · 23-05-2018, 18.11.04

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

Ciao!

**bcprojects** · 25-05-2018, 18.46.04

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

**alemoppo** · 25-05-2018, 19.15.21

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!

**bcprojects** · 28-05-2018, 17.46.01

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".

**alemoppo** · 28-05-2018, 18.00.19

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!

Discussione: Loading che precede la comparsa di un immagine

LinkBack

Strumenti discussione

Display

Loading che precede la comparsa di un immagine

Regole di scrittura