nicht angemeldet
Bild "nachladen" mit Ladesymbol
0 0 0 
Der Martin
0 0 0 
Gunnar Bittersmann
0 0 
Auge
Bild "nachladen" mit Ladesymbol
Matthias ApselHallo, ich bin ein wenig skeptisch bei der Auswahl der richtigen Methodik zum Erreichen meines Ziels..
ZIELVORGABE: per Klick ist ein Bild in einen vordefinierten Container meiner PHP-Datei nachzuladen. Zusätzlich soll für die Dauer der Ladezeit ein Lade-GIF auf den Ladevorgang aufmerksam machen. ...das Ganze ohne Bibliotheken, nur php, javascript.
...ist dafür ein XMLHttpRequest notwendig? http://www.html5rocks.com/de/tutorials/file/xhr2/ hat dafür ja recht schöne Fallbeispiele parat (würde für mein Vorhaben die Sektion: Datei oder Blob hochladen: xhr.send(Blob) in Frage kommen?)
Bin auch über https://capdroid.wordpress.com/2015/03/09/html-download-image-through-ajax-and-display-it/ gestolpert; - nur: ist dies auch tatsächlich der richtige Weg für mein Vorhaben?
was spricht zum Beispiel dagegen, einfach mit einer onclick Aufforderung eine Javascript Funktion auszulösen, in der dann erst die Bild-URL, bzw. das Ziel-<DIV> bekanntgegeben wird? Dies erscheint mir zwar einfacher, jedoch wird z.B."complete" bzw. "ok" [readyState==4 && status==200] komplett außen vor gelassen.
Ich bin daher ob der verschiedenen Lösungsansätze ein wenig verunsichert - wie ist die definierte Zielvorgabe korrekt umzusetzen, sodass sie auch allen Anforderungen und Standards entspricht? XMLHttpRequest notwendig und sinnvoll oder Overkill?
Vielen Dank für jeden Deut in die richtige Richtung, Lars.
-
Hallo
Ich verstehe das Problem überhaupt nicht.
Grafiken sollten so optimiert sein, dass sie ohne nervige Verzögerung geladen werden.
Falls man, aus welchen Gründen auch immer, meint, den Besuchern eine besonders ladeintensive Grafik präsentieren zu müssen weist man sie vorher darauf hin. Dann können die Besucher entscheiden ob sie die Grafik laden möchten oder nicht. Dann ist wiederum kein Lade-Gif erforderlich.
Den Besuchern ohne Vorwarnung in eine lange Ladezeit zu schicken ist schlechter Stil, egal ob mit oder ohne Lade-Gif.
Gruss
MrMurphy
-
Du weist mit JS dem img-element einen src-url zu und bis das img-onload-event feuert, zeigst du eine throbber-grafik, fertig.
-
Hi,
ZIELVORGABE:
per Klick ist ein Bild in einen vordefinierten Container meiner PHP-Datei nachzuladen.
Zusätzlich soll für die Dauer der Ladezeit ein Lade-GIF auf den Ladevorgang aufmerksam machen.
...das Ganze ohne Bibliotheken, nur php, javascript.die Einleitung "per Klick" sagt glasklar, dass es um eine Nutzer-Interaktion geht, also eine clientseitige Aktion. Damit ist PHP komplett raus aus der Nummer, und wir beschränken uns auf Javascript und HTML/CSS.
...ist dafür ein XMLHttpRequest notwendig?
Nein, das wäre hier mit Elefanten auf Mücken geschissen. Du brauchst nur der src-Eigenschaft des img-Objekts den passenden Wert (URL) zuzuweisen. Falls das img-Element ursprünglich noch nicht existiert, kannst du es mit createElement() erzeugen und mit appendChild() ins Dokument einpflanzen - oder meinetwegen auch "oldschool" mit einer Zuweisung an innerHTML des gewünschten Containerelements. Das sind im Grunde ein, zwei Zeilen Javascript. Fertig. Alles weitere macht der Browser.
Der kümmert sich in aller Regel auch darum, die Verzögerung irgendwie zu signalisieren, etwa durch den berüchtigten Eieruhr-Cursor.So long,
Martin -
Hi there,
ZIELVORGABE: per Klick ist ein Bild in einen vordefinierten Container meiner PHP-Datei nachzuladen.
Ich nehm' einfach einmal an, Du möchtest irgendwo auf Deiner Seite dort wo vorher nix war nach Klick ein Bild anzeigen. Dabei ist PHP oder nicht völlig wurscht, es sei denn, Du machst das wirklich mit Ajax, was aber mE hier nicht notwendig ist.
Zusätzlich soll für die Dauer der Ladezeit ein Lade-GIF auf den Ladevorgang aufmerksam machen. ...das Ganze ohne Bibliotheken, nur php, javascript.
so ginge es, nur mit Javascript, sicher gibts noch andere Möglichkeiten aber die funktioniert...
<!DOCTYPE HTML> <html> <head> <title>Komplett wurscht</title> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function picLoaded() { document.getElementById('PIC').innerHTML='<img src="'+document.getElementById('DUMMY').src+'">'; } </SCRIPT> </head> <body> <img id="DUMMY" src="" style="display:none;"> <div id="PIC"> </div> <button onclick="document.getElementById('PIC').innerHTML='<img src=\'hier_kommt_Dein_Ladegif_her\'>';document.getElementById('DUMMY').addEventListener('load',picLoaded,false);document.getElementById('DUMMY').src='hier_kommt_das_Bild_das_Du_anzeigen_moechtest_her';">Klick</button> </body> </html>hope it helps...
-
@@Klawischnigg
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">Wo hast du denn das ausgegraben?
Die
type-Angabe ist in HTML spätestens seit HTML5 überflüssig; dielanguage-Angabe war schon immer unsinnig.Außerde ist es guter Stil, sämtliche Element- und Attributbezeichner kleinzuschreiben.
document.getElementById('PIC').innerHTML='<img src="'+document.getElementById('DUMMY').src+'">';Fehler: Alternativtext (
alt-Attribut) fehlt.<img id="DUMMY" src="" style="display:none;">Dito. Und
src=""ist nicht regelkonform.<button onclick="document.getElementById('PIC').innerHTML='<img src=\'hier_kommt_Dein_Ladegif_her\'>';document.getElementById('DUMMY').addEventListener('load',picLoaded,false);document.getElementById('DUMMY').src='hier_kommt_das_Bild_das_Du_anzeigen_moechtest_her';">Klick</button>Dito. Und JavaScript inline im HTML (
on…-Attribut) zu notieren ist auch fernab von best practice.Und den
load-Eventhandler innerhalb desclick-Handlers zu definieren ist auch bestenfalls mittelmäßig sinnvoll.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hi there,
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">Wo hast du denn das ausgegraben?
sorry Gunnar, manchmal gehst Du mir echt auf die Nerven. Der OP wollte irgendeine Idee haben, und ich hab ihm das einfach quick and dirty geliefert. Das Language-Attribut kommt von einem Makro in einem Editor und ich es war mir ehrlich gesagt komplett wurscht, wie veraltet das ist oder nicht.
Meine Lösung funktioniert, und darauf kommt es an. Die Schönheitspreise für besonders pedantes Programmieren kannst Du Dir beim Salzamt abholen...
-
@@Klawischnigg
sorry Gunnar, manchmal gehst Du mir echt auf die Nerven.
Mir geht’s auf die Nerven, wenn jemand 2016 noch Zeugs verbreitet, das 2006 schon unsinnig war.
Meine Lösung funktioniert, und darauf kommt es an.
„Funktioniert“ ist notwendige, aber keine hinreichende Bedingung für anständigen Code.
Und Beispielcode muss anständig sein, da Anfänger diesen lernen.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
-
Hi Lars
ZIELVORGABE: per Klick ist ein Bild in einen vordefinierten Container meiner PHP-Datei nachzuladen. Zusätzlich soll für die Dauer der Ladezeit ein Lade-GIF auf den Ladevorgang aufmerksam machen. ...das Ganze ohne Bibliotheken, nur php, javascript.
Du kannst mit Javascript HTML-Elemente erzeugen, die aussehen wie Ladebalken, und an die stelle des Bildes einfügen, bis das Bild geladen ist. Wenn es geladen ist, das HTML wieder entfernen.
http://tobiasahlin.com/spinkit/
Bis bald
-
@@Malcolm Back`s
Du kannst mit Javascript HTML-Elemente erzeugen, die aussehen wie Ladebalken,
Sogar HTML-Elemente, die nicht nur so aussehen wie Ladebalken, sondern auch welche sind:
progress.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hi Gunnar
Sogar HTML-Elemente, die nicht nur so aussehen wie Ladebalken, sondern auch welche sind:
progress.würde ich der CSS-Lösung aber nicht unbedingt vorziehen.
Bis bald
-
Hallo
Sogar HTML-Elemente, die nicht nur so aussehen wie Ladebalken, sondern auch welche sind:
progress.würde ich der CSS-Lösung aber nicht unbedingt vorziehen.
Das hat welchen Grund? Mangelnde Unterstützung durch die Browser kanns ja nicht sein.
Tschö, Auge
--
Wir hören immer wieder, dass Regierungscomputer gehackt wurden. Ich denke, man sollte die Sicherheit seiner Daten nicht Regierungen anvertrauen.
Jan Koum, Mitgründer von WhatsApp, im Heise.de-Interview-
Hi Auge,
Das hat welchen Grund?
Weil ich bei der CSS-Variante nur 2 leere Elemente benötige. Die kann ich mit Javascript erzeugen und an gewünschter stelle einfügen. Sieht mMn nach auch besser aus.
Mangelnde Unterstützung durch die Browser kanns ja nicht sein.
Nein, daran liegt es nicht.
Bis bald
--
Hosen sind Blau-
Hi Malcolm,
Weil ich bei der CSS-Variante nur 2 leere Elemente benötige.
Funktioniert sogar mit nur einem Element^^
Hosen sind Blau
Bis bald
--
Hosen sind Blau-
Hallo Malcolm Beck`s,
Funktioniert sogar mit nur einem Element^^
progress ist auch nur ein Element.
Bis demnächst
Matthias--
Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)-
@@Matthias Apsel
progress ist auch nur ein Element.
Aber kein Spinner, der sich einfach nur bewegt.
progresssollte den wirklichen Fortschritt beim Laden anzeigen, u.U. also auch stehenbleiben.LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar) -
Hi Matthias,
Funktioniert sogar mit nur einem Element^^
progress ist auch nur ein Element.
Würde hier und da sogar gut aussehen. Aber leider kriege ich das ding überhaupt nicht stylish Hübsch.
https://jsfiddle.net/fhxafhx3/
Da gefallen mir doch eher die Spinner ;)
Bis bald
--
Hosen sind Blau
-
-
-
-
-
-
-