[Erledigt] jQuery - warten, bis Grafik geldaden wurde

Arne Drews · 19.10.2010, 09:48

Hallo Leute,

Hab' nochmal ne jQuery-Frage.
Ich verändere auf Klick den Hintergrund der Website.
Während das neue Bild geladen wird, blende ich eine Animation ein.
Diese soll ja nun nach dem Laden wieder entfernt werden.

Daß ich bei Effekten eine Callback-Funktion nutzen kann, um das Ende der Animation abzuwarten, ist mir klar.

Aber wie kann ich ermitteln, ob das Bild vollständig geladen wurde, wenn ich folgenden Befehl verwende:

Code:

$('#background').attr('src', wallpaperSRC);
$('#bgLoader').remove();

in wallpaperSRC ist natürlich das richtige Bild angegeben.
Soweit funktioniert das ja auch, aber wenn ich z.B. die Lade-Animation hinterher schliessen möchte (zweite Zeile: #bgLoader), führt er das natürlich aus, nachdem er das Attribut src neu gesetzt hat.
Das heißt ja aber nicht, daß das entsprechende Bild bereits komplett geladen wurde.

Wär schön, wenn da jemand einen Tipp hätte.
Thx

TZP · 19.10.2010, 09:59

Wie lädst du die Bilder/das Bild rein? Auf die Schnelle - und wenn ich das richtig verstanden habe- würde ich ihn am Ende der Animation fragen, ob dein Platzhalter eine Breite oder so hat. Die müsste ja 0 sein, wenn du das alte Bild wegnimmst und das neue erst reingeladen werden muss. Wenn nichts vorhanden ist, kommt die Animation noch mal.

draco88 · 19.10.2010, 10:06

Wenn ein Bild volständig geladen ist, wird das onLoad Event für das entsprechende Element abgefeuert.

Code:

$('#background').attr('src', wallpaperSRC).load(function() { 
});

ChrisB · 19.10.2010, 10:26

Zitat:

Zitat von Arne Drews

Ich verändere auf Klick den Hintergrund der Website.

Offenbar nicht - denn du benutzt ja das src-Attribut, also ist es wohl ein normales IMG-Element, und kein Hintergrundbild.

Zitat:

Aber wie kann ich ermitteln, ob das Bild vollständig geladen wurde

Auch beim Laden von Bildern über IMG-Objekte werden Events wie onload, oncomplete, onerror o.ä. von den Browsern gefeuert - ein Mechanismus, auf dem jeder der seit Jahren bekannten „Image-Preloader“ basiert.

Ob und wie jQuery das kapselt und ggf. schon browserübergreifend vereinfacht, müsstest du in der Doku nachschauen.

Arne Drews · 19.10.2010, 10:26

Perfekt! Danke draco, hatte bereits an Event-Handler gedacht, aber die Function load() hatte ich gar nicht berücksichtigt.

Danke schön!

@ChrisB

Zitat:

Offenbar nicht - denn du benutzt ja das src-Attribut, also ist es wohl ein normales IMG-Element, und kein Hintergrundbild.

Yes... Hast recht, das IMG Tag dient als Background-Canvas.
Sorry, hatte ich falsch geschrieben!

Es funktioniert aber einwandfrei mit der load()-Variante.

Danke nochmal allen beteiligten!

TZP · 19.10.2010, 10:44

Ein onLoad-Event...wieder was gelernt. -notiz-

baileys · 23.06.2011, 19:57

Zitat:

Zitat von Arne Drews

Ich verändere auf Klick den Hintergrund der Website.
Während das neue Bild geladen wird, blende ich eine Animation ein.
Diese soll ja nun nach dem Laden wieder entfernt werden.

Könntest du mir bitte deinen Code als Beispiel zur Verfügung stellen?
Ich möchte auch durch ein Klick das Hintergrundbild verändern und während des Ladens eine Ladegrafik anzeigen. Leider finde ich nichts im Internet wie man sowas realisieren kann.

rudygotya · 23.06.2011, 20:08

Wenn du nur mit .load arbeitest, wirst du im IE Probleme kriegen.
Stattdessen jQuery ajaxhooks verwenden: => http://jscouch.de/#/blog/article/id/8

Grüße

Basti

xm22 · 24.06.2011, 08:12

Zitat:

Könntest du mir bitte deinen Code als Beispiel zur Verfügung stellen?

Ihr habt das Datum des letzten Postings gesehen?

rudygotya · 24.06.2011, 09:03

Aus meiner Perspektive passt das Datum des "letzten Postings"

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Bin noch ein Anfänger mit jquery bitte um hilfe	bomber007	JavaScript, Ajax und mehr	4	19.08.2010 23:34
[Erledigt] jQuery Slider - In eine Richtung sperren	Trainmaster	JavaScript, Ajax und mehr	2	08.08.2010 16:06
[Erledigt] Statistik mit jQuery	DJ_RhoxxZ	JavaScript, Ajax und mehr	6	25.07.2010 17:47
jquery: dialogbox funktioniert nicht	Dreamwatcher	JavaScript, Ajax und mehr	16	22.07.2010 18:22
jQuery Plug scroll to - wie einbetten?	mxxxx	JavaScript, Ajax und mehr	5	24.04.2010 18:12
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Koordinaten des Mauszeigers über einer Grafik (Drag&Drop mit jQuery)	anbeck	JavaScript, Ajax und mehr	5	19.01.2009 16:28
[Erledigt] Grafik in Scheiben schneiden		PHP Tipps 2006	6	02.05.2006 18:23
Text und Grafik zentriert in einer Zeile	php_frage	HTML, Usability und Barrierefreiheit	5	26.04.2006 12:48
Grafik drucken		PHP Tipps 2006	13	24.02.2006 23:48
Dynamischer Text in einer Grafik per Formular einfügen		PHP Tipps 2005-2	2	19.08.2005 00:55
Grafik über mehrere Zellen einer Tabelle	neodrei	HTML, Usability und Barrierefreiheit	9	18.08.2005 19:26
in zelle oben text und unten grafik am rand	janni	HTML, Usability und Barrierefreiheit	4	29.06.2005 23:35
Grafik in Grafik einfügen	Filewalker	PHP Tipps 2004	3	20.06.2004 14:04

19.10.2010, 09:48
Arne Drews Erfahrener Benutzer Registriert seit: 22.04.2009 Beiträge: 3.486 PHP-Kenntnisse: Anfänger	[Erledigt] jQuery - warten, bis Grafik geldaden wurde Hallo Leute, Hab' nochmal ne jQuery-Frage. Ich verändere auf Klick den Hintergrund der Website. Während das neue Bild geladen wird, blende ich eine Animation ein. Diese soll ja nun nach dem Laden wieder entfernt werden. Daß ich bei Effekten eine Callback-Funktion nutzen kann, um das Ende der Animation abzuwarten, ist mir klar. Aber wie kann ich ermitteln, ob das Bild vollständig geladen wurde, wenn ich folgenden Befehl verwende: Code: $('#background').attr('src', wallpaperSRC); $('#bgLoader').remove(); in wallpaperSRC ist natürlich das richtige Bild angegeben. Soweit funktioniert das ja auch, aber wenn ich z.B. die Lade-Animation hinterher schliessen möchte (zweite Zeile: #bgLoader), führt er das natürlich aus, nachdem er das Attribut src neu gesetzt hat. Das heißt ja aber nicht, daß das entsprechende Bild bereits komplett geladen wurde. Wär schön, wenn da jemand einen Tipp hätte. Thx __________________ Phantasie ist wichtiger als Wissen, denn Wissen ist begrenzt. Probleme kann man niemals mit derselben Denkweise lösen, durch die sie entstanden sind. Albert Einstein


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

19.10.2010, 09:59
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Wie lädst du die Bilder/das Bild rein? Auf die Schnelle - und wenn ich das richtig verstanden habe- würde ich ihn am Ende der Animation fragen, ob dein Platzhalter eine Breite oder so hat. Die müsste ja 0 sein, wenn du das alte Bild wegnimmst und das neue erst reingeladen werden muss. Wenn nichts vorhanden ist, kommt die Animation noch mal.

19.10.2010, 10:06
draco88 Erfahrener Benutzer Registriert seit: 01.12.2009 Beiträge: 645 PHP-Kenntnisse: Fortgeschritten	Wenn ein Bild volständig geladen ist, wird das onLoad Event für das entsprechende Element abgefeuert. Code: $('#background').attr('src', wallpaperSRC).load(function() { });

19.10.2010, 10:44
TZP Erfahrener Benutzer Registriert seit: 17.08.2010 Beiträge: 152 PHP-Kenntnisse: Anfänger	Ein onLoad-Event...wieder was gelernt. -notiz-

23.06.2011, 20:08
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Wenn du nur mit .load arbeitest, wirst du im IE Probleme kriegen. Stattdessen jQuery ajaxhooks verwenden: => http://jscouch.de/#/blog/article/id/8 Grüße Basti __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

24.06.2011, 09:03
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Aus meiner Perspektive passt das Datum des "letzten Postings" __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog