Image Preloader unter IE will nicht

Hallo,

ich habe ein Problem mit meinem Image Preloader.

unter Mozilla läuft alles super, nur im IE nicht.

Unter mozilla lädt er die bilder vor und der wechsel geht superschnell.
Unter'm IE scheint er die Bilder neu zu laden. zusätzlich resized er das aktuelle bild sofort beim click - lädt dann das neue und zeigt es an.

mein versuch war jetzt
1) das aktuelle bild ausblenden
2) den .src ändern
3) warten bis bild geladen
4) bild width+height setzen
5) bild einblenden


source:

var picShow = 1;
var picShowMax = 2;
var pictures = new Array();

pictures[1] = new Array();
pictures[1]['id'] = 165;
pictures[1]['bigid'] = 167;
pictures[1]['pic'] = new Image();
pictures[1]['pic'].src= '/xincludes/pic.php?id=165';
pictures[1]['text'] = 'Dance Rehearsal';

pictures[2] = new Array();
pictures[2]['id'] = 174;
pictures[2]['bigid'] = 176;
pictures[2]['pic'] = new Image();
pictures[2]['pic'].src= '/xincludes/pic.php?id=174';
pictures[2]['text'] = 'Dancers Projection Costumes';


var picName = 'pic'+pictures[picShow]['id'];
var aktVisible = '';

function setPic(id) {
if (id==0)id=picShowMax;
if (id==picShowMax+1)id=1;
aktVisible = document.images[2].style.visibility;
document.images[2].style.visibility = 'hidden';
document.images[2].src = pictures[id]['pic'].src;
document.images[2].width = pictures[id]['pic'].width;
document.images[2].height = pictures[id]['pic'].height;
setCont('id','picText',null,pictures[id]['text']);
document.images[2].style.visibility = aktVisible;
picShow=id;
return false;
}




Sieht da jemand einen Fehler in der "function setPic(id)" ?


Grüsse,
Daniel.

Daniel Stobbe wrote:

mein versuch war jetzt
1) das aktuelle bild ausblenden
2) den .src ändern
3) warten bis bild geladen

An welcher Stelle in Deinem Code meinst Du, würde gewartet?

4) bild width+height setzen
5) bild einblenden

Schau Dir mal das load-Event für Bildobjekte an.

ciao, dhgm

Dietmar Meier schrieb:

mein versuch war jetzt
1) das aktuelle bild ausblenden
2) den .src ändern
3) warten bis bild geladen

An welcher Stelle in Deinem Code meinst Du, würde gewartet?

Das while.....
Sorry, hab beim ganzen rumprobieren ne falsche version gepostet, hier die richtige:


function setPic(id) {
if (id==0)id=picShowMax;
if (id==picShowMax+1)id=1;
aktVisible = document.images[2].style.visibility;
document.images[2].style.visibility = 'hidden';
document.images[2].src = pictures[id]['pic'].src;
while(document.images[2].complete == false) { ; }
document.images[2].width = pictures[id]['pic'].width;
document.images[2].height = pictures[id]['pic'].height;
setCont('id','picText',null,pictures[id]['text']);
document.images[2].style.visibility = aktVisible;
picShow=id;
return false;
}

4) bild width+height setzen
5) bild einblenden
Schau Dir mal das load-Event für Bildobjekte an.

ok, getestet:

function setPic(id) {
if (id==0)id=picShowMax;
if (id==picShowMax+1)id=1;
document.images[2].src = pictures[id]['pic'].src;
document.images[2].onload = function setPicSize() { document.images[2].width = pictures[picShow]['pic'].width; document.images[2].height = pictures[picShow]['pic'].height;}
setCont('id','picText',null,pictures[id]['text']);
picShow=id;
return false;
}


das Stretching Problem is damit gelöst.

Es ist im IE jedoch immernoch ziemlich lahm, da er die Bilder nachholt.
Aber da ich die Files via php ausliefere, schätz ichg mal das es am cache liegt.
Werd mal nen anderen Header inkl. cache testen.


Danke,
Daniel.

Daniel Stobbe wrote:

ich habe ein Problem mit meinem Image Preloader.

Bilder versuchen "vorzuladen", ist nur in den seltensten Fällen
sinnvoll. Ob überhaupt vorgeladen wird, ist von den Cache-Einstellungen
beim Benutzer abhängig.

[...]
source:

<http://pointedears.de/scripts/test/hoverMe>

Sieht da jemand einen Fehler in der "function setPic(id)" ?

<http://glasgoogle.de/>


PointedEars

Daniel Stobbe wrote:

Dietmar Meier schrieb:
mein versuch war jetzt
1) das aktuelle bild ausblenden
2) den .src ändern
3) warten bis bild geladen
An welcher Stelle in Deinem Code meinst Du, würde gewartet?

Das while.....
[...]
function setPic(id) {
[...]
while(document.images[2].complete == false) { ; }
[...]

`complete' ist eine proprietäre Eigenschaft, W3C-DOM Level 2+ HTML sieht
derlei nicht vor. Stellt also das DOM des UA (völlig standardkonform!)
die Eigenschaft nicht bereit, wird `undefined' zu `false' konvertiert,
`false == false' ständig zu `true' ausgewertet, und Dein Script hängt
(mangels Abbruchbedingung) in einer Endlosschleife fest. Da
ECMAScript-Implementationen single-threaded sind, blockiert das Script
den UA (ggf. das ganze System), bis der User den UA tötet. Das kannst
Du nicht wirklich wollen.

Stattdessen suchst Du etwas wie

document.images[2].onload = function() {
// ...
}

bzw. standardkonform

document.images[2].addEventListener(
"load",
function() {
// ...
},
false);

Ich rate Dir aber, das Vorladen sein zu lassen. Wenn es denn sein
muss (weshalb?), solltest Du wegen der besseren Wartbarkeit auf die
(HTML)Image(Element)-Objekte anhand ihres Namens zugreifen, siehe
hoverMe.


PointedEars
--
Frauen haben keinen Pulli. Frauen haben eine Mumu.
-- Thomas Kranke in dateka°

Thomas 'Ingrid' Lahn schrob teilweise Unfug:

Daniel Stobbe wrote:
while(document.images[2].complete == false) { ; }
[...]

`complete' ist eine proprietäre Eigenschaft, W3C-DOM Level 2+ HTML sieht
derlei nicht vor. Stellt also das DOM des UA (völlig standardkonform!)
die Eigenschaft nicht bereit, wird `undefined' zu `false' konvertiert,
[Endlosschleife]

Ich nehme einiges zurück und behaupte das Gegenteil davon, denn es
gilt (für mich überraschenderweise):

(undefined == false) == false

`undefined' wird also _hier_ nicht zu `false' konvertiert (z.B. bei

alert(undefined ? 1 : 2);

hingegen schon ["2" wird angezeigt].)

Stattdessen suchst Du etwas wie

document.images[2].onload = function() {
// ...
}

bzw. standardkonform

document.images[2].addEventListener(
"load",
function() {
// ...
},
false);

Das ist dennoch sauberer als eine Endlosschleife.


PointedEars
--
Die Neugier steht immer an erster Stelle
eines Problems, das gelöst werden will.
-- Galileo Galilei

Thomas 'PointedEars' Lahn schrieb:

Stattdessen suchst Du etwas wie

document.images[2].onload = function() {
// ...
}

bzw. standardkonform

document.images[2].addEventListener(
"load",
function() {
// ...
},
false);


Das ist dennoch sauberer als eine Endlosschleife.
ich werd's noch konform umbauen, hab bisher ".onload = function ..."

PS: Des vorladen muss sein, da das click-verhalten an Flash rankommen soll, und des is halt gecached und daher schnell. Is halt Kundenwunsch...

Danke für die gute Erklährung,

Daniel.

Daniel Stobbe schrieb:

Thomas 'PointedEars' Lahn schrieb:
Stattdessen suchst Du etwas wie
document.images[2].onload = [...]
bzw. standardkonform
document.images[2].addEventListener([...]);
[...]
ich werd's noch konform umbauen, hab bisher ".onload = function ..."

Hinweis: Die standardkonforme Variante erfordert einen UA, der
dieses Feature (load-Event) von DOM Level 3 Events implementiert.
Das dürften derzeit nur neuere Mozilla/5.0 (rv:1.7+) sein.

PS: Des vorladen muss sein, da das click-verhalten an Flash
rankommen soll, und des is halt gecached und daher schnell. Is halt
Kundenwunsch...

Welcher Teil von "Vorladen funktioniert nicht" ist noch unklar?

Danke für die gute Erklährung,

Gern geschehen.


PointedEars