Einfach onclick-Seite loader

Ich machte diese wirklich grundlegende Start-Seite in HTML, das hat Bilder, Referenz-websites. Gibt es einen Weg, um einen loader, nachdem der Benutzer klickt auf das Bild, dann der loader geht Weg, wenn die website kommt? Ich bin versucht, den Nutzern etwas zu schauen, während eine Webseite lädt. Unten ist ein Beispiel href Linie, die ich benutze.

<a href="https://Website.com"><img border="0" alt="Image" src="logo.gif"></a>

Fand ich dieses Skript online, aber ich weiß nicht wie ich es hinzufügen zu meiner Start-Seite. Kann mir jemand helfen, setzen sich diese zusammen? Wo soll ich die Zeile " onclick="myFunction()?"'Danke!

 onclick="myFunction()"

 <script>
 var myVar;

 function myFunction() {
 myVar = setTimeout(showPage, 3000);
 }

 function showPage() {
 document.getElementById("loader").style.display = "none";
 document.getElementById("myDiv").style.display = "block";
 }
 </script>
  • Ist das nicht die neue Seite ersetzt die gegenwärtige Seite? Die Anker zeigen Ihnen in der Frage zu sein scheint, einen "normalen" link zu einer anderen Seite/site. Wenn dem so wäre, wären Sie nicht brauchen, um sorgen über das ausblenden einer "loading" - Bild, würde es verschwinden automatisch, wenn die aktuelle Seite entlädt.
InformationsquelleAutor kcd | 2017-03-01
  1. 2

    Hier ist ein Beispiel für etwas, das Sie brauchen,.

    Ein loader wird angezeigt, wenn Sie klicken Sie auf die Schaltfläche, und verschwindet, nachdem die website geladen.

    HTML:

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
   var myVar;
 $( "#myDiv" ).click(function() {
  	myFunction(this);
});

 function myFunction(div) {
 $("#loader").toggle();
 $(div).toggle();

 }

   
});
</script>
</head>
<body>
<a id="myDiv" href="https://Website.com">Click me</a>
<div id="loader" style="display:none;background:green;padding:150px">This is a loader</div>


</body>
</html>

    Hier ist eine funktionierende DEMO

    • Das snippet funktioniert nicht. Keine Notwendigkeit für die inline - onclick - Attribut, wenn Sie die Bindung eines click-handler mit jQuery.
    • die in html geschrieben wurde übersehen, aber mein snippet ist in Ordnung. Sie können sogar überprüfen Sie die DEMO.
    • Na sicher, es funktioniert jetzt, dass du es bearbeitet hast. Warum hast du das timeout? Die neue Seite ersetzt die gegenwärtige, so gibt es keine Notwendigkeit, manuell zu verbergen loader, und in jedem Fall, wenn Sie ausblenden, dass es nach einer festgelegten Zeit kann der Benutzer mit der linken, einige Sekunden nichts, bevor die Seite geladen wird.
    • danke, ja das hat auch einen Punkt, ich gab die Antwort, um ihn zu verstehen, wie, dass der code tatsächlich funktioniert. Es kann entfernt werden, da die Seite leitet auf eine neue Seite. trotzdem entfernt es. Danke.
    • Kann ich die Wiederverwendung der Funktion, wenn ich muss hinzufügen mehr websites?
    • ja, Sie können. da der loader ist der gleiche in der ganzen Seite sind, können Sie die parent-Id der div, so dass das gesamte div-Element wird versteckt und kann Anzeige loader
    • überprüfen Sie die aktualisierte Antwort. Sie können sogar übergeben Sie die Referenz div.
    • Schön. Danke, korrigiert mich wenn ich falsch Liege, die Funktion ist wie eine Methode, richtigen? Wenn dem so ist, habe ich glaube ich verstanden, was es tut, bin ich dankbar für die Erklärung!
    • ja genau, eine function ist ein method in javascript.

    InformationsquelleAutor Sravan
  2. 2

    Entnehmen Sie bitte dem folgenden link ist es richtig erklärt, wie es zu tun.
    http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript

    • Link-nur die Antworten sind verpönt bei Stack Overflow, aber in jedem Fall die OP nicht versucht, ein Bild zu laden, Sie scheinen geladen zu werden (oder das navigieren auf einer anderen Seite.
    InformationsquelleAutor maria.m
Schreibe einen Kommentar