ich eine Grundwetter Anwendung, die Daten aus forecast.io bekommt und zeigt Symbole, die im Zusammenhang mit skycons die Symbole zeichnen und beseelt mit der html5 LeinwandWie kann ich die Daten zu aktualisieren, ohne die Leinwand zu brechen
Alles zu Werke scheint gut, aber ich muss das Wetter regelmäßig aktualisieren, ohne die ganze Seite zu aktualisieren und die Jquery Ajax-Methode schien eine Antwort auf mein Problem zu sein. Die Textdaten werden aktualisiert und erhalten die neuen Informationen, aber die Zeichenfläche scheint zu brechen.
Ich habe es geschafft, das Problem zu isolieren. Es scheint, ich verstehe nicht, wie die HTML-Leinwand funktioniert.
Hier ist ein einfacheres Problem
Dieser Code wird ein rotes Rechteck und frischt Teil der Seite mit der jquery Load-Methode
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="container">
<div id="weather">
<canvas id="icon"></canvas>
</div>
</div>
<script>
var i = document.getElementById('icon');
var c = i.getContext('2d');
c.fillStyle = "red";
c.fillRect(0, 0, 300, 300);
</script>
<script>
var container = $("#container");
setInterval(function() {
container.load("index.php #weather");
console.log("refresh")
}, 1000);
</script>
Leider ist das rote Rechteck auf dem Reload verschwinden. gif
Meine Frage ist, was soll ich tun, damit es bleibt/wieder auftaucht?
Ich habe versucht, den Canvas-Code innerhalb der Intervallfunktion nach dem Laden, aber das Rechteck erscheint für einen Bruchteil einer Sekunde nur wieder verschwinden?
Bitte versuchen Sie diese auf Ihrem eigenen Maschinen meine Probleme zu bestätigen
Kann mir jemand erklären, wie die Leinwand funktioniert und mir bitte führe zu einer Lösung
Das Problem das gleiche für meine Symbole ist sie nach dem Nachladen für einen zweiten blinken zu verschwinden recordit.co/Ta6u5oVkie
Sie müssen die Leinwand neu zu zeichnen, nachdem Sie die Daten aus index.php dem Behälter wird nicht aktualisiert werden, bis die Daten geladen, die nach der Timeout-Funktion ausgeführt wird sein werden. Ich kenne jQuery nicht, aber sicher gibt es ein onload-Ereignis für den container.load, den Sie erstellen. – Blindman67
Sie 'url' ist nicht gültig und macht' load() 'zum Fehlschlagen (und leeren Sie damit Ihren Container). Aber was ist der Inhalt von 'index.php'? Enthält es auch JavaScript-Code? Warum verwenden Sie 'load()' (welches HTML schreibt) anstelle eines einfachen 'get()', um nur die neuen Daten zu erhalten und dann Ihre bereits vorhandene Leinwand zu aktualisieren? – Kaiido