Zeigen Sie Splash-Screen beim Laden der Seite, aber mindestens für x Sekunden

Ich habe ein div mit einem Splashscreen-Element. Dieses Element wird beim Laden der Seite ausgeblendet. Ich möchte aber auch sicherstellen, dass der Begrüßungsbildschirm mindestens x Sekunden lang angezeigt wird.Zeigen Sie Splash-Screen beim Laden der Seite, aber mindestens für x Sekunden

Ich weiß, dass dies nicht alles als Code formatiert werden soll, aber der automatische Formatierer hat mich dazu gebracht.

So verwenden Sie die Logik: Zeigen Sie den Begrüßungsbildschirm mindestens x Sekunden lang an. Wenn die Seite zu diesem Zeitpunkt geladen ist, verstecken Sie dieses div.

Dieser Code ist der Teil, wo das div versteckt wird, sobald die Seite geladen ist.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
      $(document).on("pageload",function(){ 
       $('#splashscreen').hide(); 
      }); 
     </script> 
     <title>Thomas Shera</title> 
    </head> 
    <body> 
     <div id="splashscreen"> 
     </div> 
    </body> 
</html>

Dies ist der Teil, wo ich den Startbildschirm für x Sekunden anzeigen.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 
      $(function() { 
       $("#div2").show().delay(x).hide(); 
      }); 
     </script> 
     <title>Thomas Shera</title> 
    </head> 
    <body> 
     <div id="splashscreen"> 
     </div> 
    </body> 
</html>

Also im Grunde frage ich, wie kann ich diese beiden jquery Codes kombinieren?

EDIT: Ich versuche jetzt diesen Code, aber etwas funktioniert immer noch nicht.

<!DOCTYPE html> 
<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> 

    $(document).on("pageload",function(){ 
       $('#splashscreen').hide(); 
}); 

$(function() { 
    $("splashscreen").show().delay(1000).hide(); 
}); 

</script> 

<style type="text/css"> 
    @import url(https://fonts.googleapis.com/css?family=Cutive+Mono); 

    .skills 
    { 
    font-family: 'Cultive Mono', monospace; 
    font-size: 400pt; 
    } 

</style> 

<title>Thomas Shera</title> 

</head> 
<body> 
    <div id="splashscreen"> 
    <p i="skills"> 
     Javascript Technical writing VBA scripting with Microsoft Office Excel 
     Entrepreneur 
    </p> 
    </div> 
</body> 
</html>

Quelle

2016-04-12 Thomas Shera

Hoffe das hilft.

HTML

<body onload="splash(3000)">

Javascript

function splash(param) { 
var time = param; 
setTimeout(function() { 
    $('#splashscreen').hide(); 
}, time); 
}

Von CSS den Block #splashscreen Element angezeigt werden und wenn die Seite geladen es von Javascript verstecken werde.

Wenn Sie dies testen möchten, laden Sie ein Bild mit hoher Auflösung von Google. Ihr Splash wird angezeigt, wenn der Inhalt der Website geladen wird oder mindestens x Sekunden, wenn der Inhalt der Website aus dem Browser geladen wird.

Quelle

2016-04-12 01:19:38 CodeMonkey

Danke, ich habe versucht, Ihre Ideen den Code zu aktualisieren, aber es funktioniert immer noch nicht. –

Gib mir einen Moment, ich habe einen solchen Spritzer gemacht, aber ich wollte nicht eine x Anzahl von Sekunden setzen, um den Splash zu zeigen. Ich werde den Code aktualisieren. :) – CodeMonkey

Getestet den Code und funktioniert perfekt. Cheeky HTML und Javascript-Code, aber funktioniert gut. – CodeMonkey

Zeigen Sie Splash-Screen beim Laden der Seite, aber mindestens für x Sekunden

Antwort

Verwandte Themen