nicht angemeldet
event, wenn Bild geladen ist (jQuery)
0 0 0 0 0 0 
Struppi
event, wenn Bild geladen ist (jQuery)
Der MartinHallo
Auf einer Startseite sollen sich mehrere relativ grosse Bilder abwechseln. Damit die Seite dennoch relativ schnell lädt, habe ich im HTML nur ein IMG drin. Sobald dieses geladen ist, sollen die anderen per Javascript (mit jQuery) hinzugefügt werden und die Diashow starten.
Funktioniert soweit, nur nicht im IE (7/8). Dieser feuert den load-Event nicht (für Standardistas: Ich weiss, dass der onload-Event in HTML 4 nur auf BODY und FRAMESET erlaubt ist, bin aber hier Pragmatiker :-).
Gibt es hier einen Weg?
Vereinfachtes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>img load test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#bild').load(function () {
window.alert('bild geladen');
});
});
</script>
</head>
<body>
<p><img id="bild" src="img/index/startbild1.jpg" width="600" height="402" alt="nonsequence spielt vor einem Brückenpfeiler"></p>
</body>
</html>
Dieses Beispiel online: http://mnn.ch/nonsequence/imgload.html
Ganze Seite in Arbeit: http://mnn.ch/nonsequence/index.html
Seid gegrüsst,
nam
-
Hi,
Funktioniert soweit, nur nicht im IE (7/8). Dieser feuert den load-Event nicht (für Standardistas: Ich weiss, dass der onload-Event in HTML 4 nur auf BODY und FRAMESET erlaubt ist, bin aber hier Pragmatiker :-).
Wenns nicht funktioniert ist es dann pragmatisch?
Davon abgesehen: selbstverständlich besitzen image-elemente den onload-event. Dennoch würde ich hier anders vorgehen. Erzeuge mit new Image() ein Image-Objekt und frage periodisch die Eigenschaft "complete" ab. Ich persönlich frage lieber height/width ab, die solange auf 0 bleiben, wie das Bild nicht geladen ist.
Gruesse, Joachim
--
Am Ende wird alles gut.-
Hi
Danke für die Antwort.
selbstverständlich besitzen image-elemente den onload-event.
Im Browser ja (z.T.), im Standard nicht…
Erzeuge mit new Image() ein Image-Objekt […]
Kommt nicht in Frage. Das (erste) Bild soll auch ohne JavaScript laden.
und frage periodisch die Eigenschaft "complete" ab.
daran hab ich nicht gedacht. Danke für den Hinweis.
Mal schauen ob ich das hinkriege…
Gruss,
nam-
selbstverständlich besitzen image-elemente den onload-event.
Im Browser ja (z.T.), im Standard nicht…Der onload-Eventhandler ist z.B. auf img-Element nicht zulässig - richtig.
Erzeuge mit new Image() ein Image-Objekt […]
Kommt nicht in Frage. Das (erste) Bild soll auch ohne JavaScript laden.Du musst aber trotzdem zusätzlich ein Image-Objekt haben ...
und frage periodisch die Eigenschaft "complete" ab.
daran hab ich nicht gedacht. Danke für den Hinweis.Mal schauen ob ich das hinkriege…
... um complete nutzen zu können ;)
Ist eigentlich sehr einfach: http://de.selfhtml.org/javascript/objekte/images.htm#complete
-
Hi,
selbstverständlich besitzen image-elemente den onload-event.
Im Browser ja (z.T.), im Standard nicht…Der onload-Eventhandler ist z.B. auf img-Element nicht zulässig - richtig.
Als HTML-Attribut in HTML 4.01 vielleicht nicht. In HTML5 schon. Da man den JS-Code aber ohnehin nicht im HTML-Code unterbringen sollte, ist das kein Problem.
Davon ganz abgesehen feuern alle Browser einen load-Event beim img-Element. Das ist in HTML5 auch standardisiert. Eine Nutzung von complete ist daher nur zusätzlich für manche Browser nötig.
http://forum.de.selfhtml.org/archiv/2008/10/t178189/#m1174748
Klaus
-
Hallo,
Davon ganz abgesehen feuern alle Browser einen load-Event beim img-Element.
alle? Das ist eine mutige Aussage.
Ich meine, ich hätte hier und da mal aufgeschnappt, dass irgendein gängiger Browser das onload-Event auf Images nicht feuert, wenn er das Bild aus dem Cache holt.
Ich weiß aber nicht mehr, welcher das war - oder ob ich das nicht generell mit etwas anderem verwechsle.Ciao,
Martin--
Noch Fragen? - Ich weiß es auch nicht.
-
Hallo,
siehe dazu den von mir gesetzten Link.
Grüße
Klaus
-
-
-
hi
habs jetzt so:
function oncomplete (obj, callback, tries) { tries--; window.setTimeout(function () { if (obj.complete && obj.complete === true) { callback(); return true; } else if (tries > 0) { oncomplete(obj, callback, tries); } else { return false; } }, 500); } $(document).ready(function () { oncomplete ($('#bild').get(0), function (event) { window.alert('bild geladen'); }, 10); });Scheint zu funktionieren.
-
Scheint zu funktionieren.
Der Timeout ist unnötig. Entweder wird der onload Event gefeuert oder complete ist bereits gesetzt.
Struppi.
-
Hi
Der Timeout ist unnötig. Entweder wird der onload Event gefeuert oder complete ist bereits gesetzt.
Warum einfach machen, wenn's auch kompliziert geht?
Danke dir!Hier für's Archiv:
function oncomplete (jqimg, callback) { if (jqimg.get(0).complete) { callback(); } else { jqimg.bind('load', callback); } } $(document).ready(function () { oncomplete ($('#bild'), function (event) { window.alert('bild geladen'); }); });Gruss,
nam
-
-
-
-
-