Avatar billede dmcn Praktikant
09. april 2002 - 16:48 Der er 12 kommentarer og
1 løsning

setTimeOut, billedskift og et hulens irriterende problem

Jeg sidder her med en skoleopgave, hvor en af delopgaverne er at lave et website. Sitet kan ses på http://www.rush.dk/sch00l/radar/page.htm .
Problemet er, at de 8 billeder over og under logoet til venstre skal "blinke", når man kommer ind på siden. Eks. skal billedet med øjet skifte fra www.rush.dk/sch00l/radar/img/eye_scan.jpg til www.rush.dk/sch00l/radar/img/eye_scan.jpg, og tilbage til eye.jpg og det skal ca. klares på 1 sekund pr. billede. Først eye.jpg, så success.jpg, så tastatur.jpg osv.
Til det har jeg strikket lidt kode sammen, men det faktum at JS ikke har en sleep();-funktion volder lidt problemer.

Koden ser ud som følger:

function swapBack(picname2, picoldsrc2) {
    document.images[picname2].src='img/'+picoldsrc2; // Her foretages selve skiftet nævnt ved setTimeOut-linien.
}

function lightShow(picname, picnewsrc, picoldsrc) {
    if (document.images) { // Browseren kan vise billeder
        document.images[picname].src='img/'+picnewsrc; // Først skiftes fra *_scan.jpg til *.jpg
        setTimeOut(swapBack('picname','picoldsrc'), 1000); // Så skiftes tilbage fra *.jpg til *_scan.jpg efter 1000 milisekunder
    }
}

function allPicsLightShow() { // Her køres så selve funktionen, der swapper billederne - denne initialieres onLoad.
    if (document.images) {
        lightShow('imgEye','eye.jpg','eye_scan.jpg');
        lightShow('imgSuccess','success.jpg','eye_success.jpg');
        lightShow('imgBaby','baby.jpg','baby_scan.jpg');
    }
}

Kan naturligvis også findes i kontekst på sitet nævnt ovenfor.

Fejlen den giver lyder:
Line: 21
Char: 5
Error: 'document.images[...]' is null or not an object

Linie 21 er den eneste linie i funktionen swapBack.

HELP! Jeg går snart amok! :( Indtil videre har jeg sat point til 30, da der altid dukker en JS-haj op og giver et svar på to minutter, men skal der mere på, så sig til. :)
Avatar billede dmcn Praktikant
09. april 2002 - 16:50 #1
Hov... fejlformulering da! :D

Eks. skal billedet med øjet skifte fra www.rush.dk/sch00l/radar/img/eye_scan.jpg til www.rush.dk/sch00l/radar/img/eye.jpg, og tilbage til eye_scan.jpg og det skal ca. klares på 1 sekund pr. billede.

Sådan skulle det lyde. :)
Avatar billede jakoba Nybegynder
09. april 2002 - 17:13 #2
sejlen ligger sidst i lightshow i linien:
    setTimeOut(swapBack('picname','picoldsrc'), 1000);

Første parameter i setTimeout skal være en streng af eksekverbar kode. fx:
    setTimeOut( "fire = 2 + 2;", 1000 );

men det er værre end det for sen streng skal kunne eksekveres i vinduest scope, når den aktiveres er den funktion der statede den jo forlængst færdig. Så du må bugge din streng sp parmetrens værdier bliver fortolket ind i den idet settimeout bliver kaldt.
Noget i retning af:
    setTimeOut( "swapBack('"+picname+"','"+picoldsrc+"')", 1000 );

mvh JakobA
Avatar billede jakoba Nybegynder
09. april 2002 - 17:15 #3
Ups  sejlen  ->  fejlen
    for sen streng  ->  for den streng
    statede  ->  startede
osv.
Avatar billede dmcn Praktikant
09. april 2002 - 17:31 #4
Funktionen blev så til:
function lightShow(picname, picnewsrc, picoldsrc) {
    if (document.images) { // Browseren kan vise billeder
        document.images[picname].src='img/'+picnewsrc; // Først skiftes fra *_scan.jpg til *.jpg
        setTimeOut( "swapBack('"+picname+"','"+picoldsrc+"')", 1000 ); // Så skiftes tilbage fra *.jpg til *_scan.jpg efter 1000 milisekunder
    }
}
Men så får jeg en "object expected"-fejl. Kreative forslag endnu, oh guru jakoba? :)
Avatar billede jakoba Nybegynder
09. april 2002 - 17:41 #5
Ups. det var mig der ikke kikkede ordentligt på det jeg kopierede. timeout er eet ord, så det skal ikke være et stort O i out.
Avatar billede dmcn Praktikant
09. april 2002 - 17:51 #6
Hmm... det hjalp, men effekten blev ikke helt som ønsket. Kan du hjælpe med at få den til at vente med at skifte billede 2, indtil billede 1 har foretaget alle sine skift? Og så fremdeles, gennem alle 8 billeder. :)
Avatar billede jakoba Nybegynder
09. april 2002 - 18:07 #7
joda.
Det er funktionen nedenfor vi vil have strakt ud så der kommer nogen tid imellem hvert kald af funktionen lightShow.

function allPicsLightShow() { // Her køres så selve funktionen, der swapper billederne - denne initialieres onLoad.
    if (document.images) {
        lightShow('imgEye','eye.jpg','eye_scan.jpg');
        lightShow('imgSuccess','success.jpg','eye_success.jpg');
        lightShow('imgBaby','baby.jpg','baby_scan.jpg');
    }
}

det kan vi gøre ved at dele den i tre små funktioner der starter hinanden i sekvens:

function allPicsLightShow() { // Her køres så selve funktionen, der swapper billederne - denne initialieres onLoad.
    if (document.images) {
        lightShow('imgEye','eye.jpg','eye_scan.jpg');
        setTimeout( "allPicsLightShow2()", 2000 ); // start næste del om 2000ms
    }
}
function allPicsLightShow2() {
        // ingen grund til document.images test her. den startes jo kun hvis det er OK
    lightShow('imgSuccess','success.jpg','eye_success.jpg');
    setTimeout( "allPicsLightShow3()", 2000 );    // start næste del om 2000ms
}
function allPicsLightShow3() {
    lightShow('imgBaby','baby.jpg','baby_scan.jpg');
        // ikke flere dele der skal startes (men jeg tæller over 3 bilder i bjælken??)
}

mvh JakobA
Avatar billede dmcn Praktikant
09. april 2002 - 18:47 #8
Sig endelig til hvis sidste delspørgsmål skal oprettes for sig - efterhånden er det lidt langhåret.

Ser du, problemet er nu, at alle billeder ikke er loadet, når lysshowet starter. En preloader, der starter lysshowet når alle nødvendige billeder er indlæst ville være helt optimalt. :)

Og al kode so far er uploadet til samme adresse. Jo, alle 8 billeder skulle skifte, men man kan vel copy/paste selv. :)
Avatar billede jakoba Nybegynder
09. april 2002 - 22:00 #9
med kun 8 så små billeder vil de 2 sekunder hvert får til at blinke-af være rigeligt til at de kan loade hen ad vejen selv med modem.

funktionen allPicsLightShow kaldes onload, ikke? på det tidspunkt er alle de billeder du skrive <img kommandoerne hentet. Så ve behøver kun at preloade de alternative billeder:

var altPics = new Array(
  "eye.jpg", "success.jpg", "baby.jpg"
                  );
// i listen ovenfor skriver du alle de billeder der skal preloades i den rækkefølge scriptet får brug for dem.

var i,tmp;
for ( i=0; i<altPics.length; i++ ) {
    tmp = altPics[i];
    altPica[i] = new Image();
    altPics[i].src = tmp;
};
// Jeg vil 95% garantere at det er preloader nok til at billederne er klar når de skal bruges selv på 24Kbps modem.

mvh JakobA
Avatar billede dmcn Praktikant
09. april 2002 - 22:45 #10
SÅ har du vist fortjent pointtildeling. :)
altPica[i] = new Image(); rettede jeg en tyrkfejl i, og det ser ud til at virke som det skal. Problemet var, at vi også skulle have preloadet menuens mouseoverfunktioner, og derfor var preload nødvendig. :)
Avatar billede jakoba Nybegynder
09. april 2002 - 22:48 #11
takker
Avatar billede jakoba Nybegynder
09. april 2002 - 22:55 #12
Ka det passe i har lært om monitorer og måske endda læst Brink Hansen?

I javascript er alt det gemt af vejen på et detailniveau der slet ikke kommer programmøren ved. Så det er bedre at tænke på sekvenser, eller måske stafetløb.

Der ER en processkø (det er fx den setTimeout hænger din streng i) men du skal næste aldrig tænke på den, bare på 'om 100ms går det der igang. Kan jeg nå at blive færdig med det her andet forinden?'.

mvh JakobA
Avatar billede dmcn Praktikant
09. april 2002 - 23:35 #13
jakoba : Vi er MMD'ere - vi lærer lidt om det hele. Grundlæggende teori omkring programmering osv. (eks. proceskøer) har vi på intet tidspunkt lært om, og jeg takker da herren (og mig selv) for den viden om JS, HTML, PHP samt MySQL jeg havde før jeg begyndte på studiet. De, der kom med 0 viden om det, har det hårdt for tiden.

Nej, faktisk har jeg aldrig tænkt i de baner - jeg så blot resultatet, og så at nogen af billederne aldrig skiftede, fordi de tilsyneladende ikke var loadet. Det gør de nu, og så er jeg glad. :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester