Visualizzazione automatica di una gif di caricamento per 5 secondi

Desidero visualizzare automaticamente una gif di caricamento quando l'utente visita il sito Web e dopo 5 secondi scompare.Visualizzazione automatica di una gif di caricamento per 5 secondi

Ho trovato questo script che fa ciò che voglio, ma non lo fa automaticamente. L'utente deve cliccare sul pulsante per avviarlo che tipo di sconfigge lo scopo.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 

function show() { 
    document.getElementById("myDiv").style.display="block"; 
    setTimeout("hide()", 5000); // 5 seconds 
} 

function hide() { 
    document.getElementById("myDiv").style.display="none"; 
} 

</script>

È possibile vederlo here.

Se c'è un modo in cui posso farlo, o se c'è un modo migliore di farlo per favore basta commentare.

fonte

2011-12-23 connor.p

[tag: javascript] *** non è *** [tag: java]. –

scusa, non lo so, sono ancora nuovo per tutto –

Basta rimuovere lo onclick="show()" e aggiungere show(); come ultima riga del blocco JavaScript.

Inoltre, come io sono sensibile a global namespace pollution, lo farei in questo modo:

<script type="text/javascript"> 

    (function(){ 
    var myDiv = document.getElementById("myDiv"), 

     show = function(){ 
     myDiv.style.display = "block"; 
     setTimeout(hide, 5000); // 5 seconds 
     }, 

     hide = function(){ 
     myDiv.style.display = "none"; 
     }; 

    show(); 
    })(); 

</script>

fonte

2011-12-23 16:51:57 ziesemer

Ricorda però se sta caricando questo nella parte superiore della pagina i suoi div non esistono nella dom. Probabilmente è meglio farlo sul caricamento della pagina. –

grazie mille, che funziona benissimo –

@DominicGreen - d'accordo, ma questo funzionerà con l'esempio che ha mostrato. Altrimenti, chiamerei l'intera cosa da qualcosa come 'jQuery.ready()'. – ziesemer

Hai provato window.onload?

Qualcosa sulla falsariga di:

<body onload="show();"> 
..snip 
</body>

fonte

2011-12-23 16:53:21

ora non ho, non ne ho mai sentito parlare forse varrà la pena guardare in –

Aggiungere window.onload = show; alla fine dello script e mostrerà il caricatore non appena la pagina ha terminato il caricamento. Ti consigliamo di utilizzare questo evento per qualsiasi cosa tu voglia fare quando l'utente apre la pagina, in quanto assicura che l'intera pagina sia disponibile prima di tentare di manipolare gli elementi sulla pagina.

fonte

2011-12-23 16:53:55 Hal

È sufficiente rimuovere lo display: none; da myDiv. In questo modo sarà visibile dall'inizio, e poi lo nasconderai dopo cinque secondi.

Non è necessario prima nasconderlo con i CSS e quindi visualizzarlo con JavaScript, quando si desidera che venga visualizzato dall'inizio.

<input type = "button" value = "Show image for 5 seconds" onclick = "show()"><br><br> 
<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
setTimeout(function(){ 
    document.getElementById("myDiv").style.display="none"; 
}, 5000); 
</script>

fonte

2011-12-23 16:54:13

Cosa succede se l'utente ha Javascript disabilitato? Quindi mostrerai loro un'animazione di caricamento, e quindi lo script non lo rimuoverà mai. – Hal

@harrison_m Punto valido, +1! –

mettere questa destra dopo <body>

<div id="myDiv"><img id="myImage" src="images/ajax-loader.gif"></div> 
<script> 
    setTimeout('document.getElementById("myDiv").style.display="none"', 5000); // 5 seconds 
</script>

fonte

2011-12-23 16:55:14

Sbarazzarsi della immagine di style="display:none" modo che l'immagine visualizzata per impostazione predefinita. Altri ti dicono di chiamare prima show(), ma questo è completamente inutile. Non è necessario utilizzare JavaScript per mostrare inizialmente l'immagine; lascia che si mostri da solo. Quindi, rimuovilo dopo 5 secondi:

<div id = "myDiv"><img id = "myImage" src = "images/ajax-loader.gif"></div><br> 

<script type = "text/javascript"> 
    setTimeout(function() { 
     document.getElementById("myDiv").style.display="none"; 
    }, 5000); // 5 seconds 
</script>

fonte

2011-12-23 16:59:40

Visualizzazione automatica di una gif di caricamento per 5 secondi

risposta

Problemi correlati