26. november 2003 - 11:56Der er
29 kommentarer og 1 løsning
preloading af billedstørrelser giver problemer
Hejsa eksperter -- jeg har et problem vedrørende et site, jeg er igang med at lave.
Jeg har en funktion som henter billeder, defineret i et array, ind og gemmer størrelsen på dem (i henholdsvis thumb og fullsize mode) ---
problemet er at nogen gange så returneres bare 0x0 som størrelse - andre gange er det tal, som synes revet ud af luften...
Min kode er som følger
function Picture_extractDimensions( album ) { var t = new Image(); var f = new Image(); t.src = album.location+this.thumbnail; f.src = album.location+this.fullsize; this.thumbnail_width = t.width; this.thumbnail_height = t.height; this.fullsize_width = f.width; this.fullsize_height = f.height; alert("["+album.name+"] "+this.picId+"\nThumbnail: "+t.src+"\n["+this.thumbnail_width+"x"+this.thumbnail_height+"]\n\nFullsize: "+f.src+"\n["+this.fullsize_width+"x"+this.fullsize_height+"]"); }
Det skal med det samme siges, at der er tale om ca. 50 billeder - og at dette bliver kørt for hvert billede første gang man går ind på sitet...
Det virker upåklageligt LOCALHOST, men når det er ude på nettet, så kommer problemerne...
Kan det være fordi det enkelte billede ikke når at blive læst ind før det næste skal "måles"... - i så fald - hvordan kan det forhindres
ps: alert'en skal ikke være med i endelig version -- pps: sitet er ikke tilgængligt for offentligheden - beskyttet af usr/pwd så kun vi og kunden kan se det...
function Picture_extractDimensions( album ) { var t = new Image(); var f = new Image(); t.src = album.location+this.thumbnail; f.src = album.location+this.fullsize; while(!t.loaded){ //<-- hvordan finder man ud af det ? //doNothing ? } this.thumbnail_width = t.width; this.thumbnail_height = t.height; while(!f.loaded){ //doNothing ? } this.fullsize_width = f.width; this.fullsize_height = f.height; alert("["+album.name+"] "+this.picId+"\nThumbnail: "+t.src+"\n["+this.thumbnail_width+"x"+this.thumbnail_height+"]\n\nFullsize: "+f.src+"\n["+this.fullsize_width+"x"+this.fullsize_height+"]"); }
function Picture_extractDimensions( album ) { var t = new Image(); t.onload = function () { this.thumbnail_width = t.width; this.thumbnail_height = t.height; }; var f = new Image(); f.onload = function () { this.fullsize_width = f.width; this.fullsize_height = f.height; }; t.src = album.location+this.thumbnail; f.src = album.location+this.fullsize; }
hmm.. det ser ud som om at this indeni onload-funktionen er undefined ... kan det være sandt ? f.onload = function (this) { this.fullsize_width = f.width; this.fullsize_height = f.height; top.window.status = "["+album.name+"] "+this.picId+"\nFullsize: "+f.src+"\n["+this.fullsize_width+"x"+this.fullsize_height+"] loaded"; };
følgende giver outputtet [Summertime] undefined Fullsize: sti [400x600] loaded
men inden i galleriet er alle billeder 1 pixel bred
Du skal kende navnet på objektet. >>øhhh .. den forstod jeg ikke lige helt...
kan jeg evt sætte en variabel på t - f.eks. således
function Picture_extractDimensions( album ) { var t = new Image(); t.picture = this; /* opret en ny property på Image objektet */ t.onload = function () { this.picture.thumbnail_width = t.width; this.picture.thumbnail_height = t.height; }; t.src = album.location+this.thumbnail; }
Men må erkende at jeg bliver nød til at kode mig ud af, hvornår de forskellige billeder skal bruges -- for selvom at billederne ser ud til at blive loaded ordenligt ind nu, så går det pokkers langsomt (der er ca. 50-60 billeder) - og før racede jeg bare igennem dem - men nu venter jeg jo pænt på at billederne er færdig med at downloade -- det er mere "sikkert" - men det er til gændgæld også langsommere :-)
(men jeg kan så sige, at det var pga. at vi kører på en langsom server (er ikke normalt beregnet til web-brug)) ... Jeg prøvede lige at køre det localhost -- og der er det super-hurtigt :-))
ja, det tager da sin tid. Er det ikke sådan at du viser siden, og når den er færdig, på <body onload="..."> preloader du billeder til de andres sider (jeg har ikke kigget i koden)
sådan som det sker nu er der et frameset - en frame med sitet (fylder 100%) og en preloader som fylder 0
preloaderens kode er <html><body onload="top.preloadImages();"></body></html>
så den går selvfølgelig igang med det samme (kan ikke helt bestemme mig for om den skal det, eller ej...
problemet er at siderne Produkter, Billedgalleri, Salonen og Kunstudstilling alle er rimlig afhængige af at billedernes størrelse (i hvert fald thumbs) _er_ loaded ind - ellers vil de "filmstrips" ikke blive proportioneret ordenligt...
evt. kan preloading af full-size billederne vente til de bliver vist i billedefremviseren... så skal jeg bare indsætte et flag, således at full-size-billederne ikke bliver preloadet _hver gang_ billedefremviseren kaldes (den er langsom nok i forvejen :-/ )
kanten af filmstrimmel bliver beregnet udfra de enkelte billeders thumbnail-størrelse - den aflæses fra picture.thumbnail_width - derfor skal den være indlæst inden filmstrimlen vises.
Man kunne evt. være lidt avanceret og lave en "preloader billeder" som vises indtil et albums thumbs er blevet indlæst måske ?
ja ... jeg har ikke noget serverside-teknologi tilgænglig... Kunden bad om en "no-frills" løsning som ikke involverede php/asp/database / the works -- Men det skulle være nemt at indsætte/tilføje nye billeder - derfor er det blevet lagt ud i en javascript-vil, som så bliver processeret når man gå ind på hjemmeside (client-side)
alt bliver beregnet på klient-siden ... kategoriering af billeder i albums, resizing af billeder - opretholdelse af aspect-ratio i forbindelse med billedefremviseren osv...
Ok, hver sin lyst - men i mine øjne er det en skrøbelig løsning, som lidt serverside programmering kunne have gjort meget mere stabil. Det er bare min mening. Jeg synes ikke helt jeg vil stå som medansvarlig for sådan en løsning, så jeg frafalder point.
vi kan hurtigt blive enige om at der kunne findes en mere stabil løsning hvis der også var noget serverside ....
Men samtidig er det jo også lidt af en udfordring at "arbejde med hvad man har" :-) ... jeg ser det i hvert fald som en spændende problemstilling - og hvad jeg ikke har lært (og ikke lært) om Javascript og relaterede problemstillinger i de sidste par dage er ikke så lidt...
Hvis du kørte det ind i en stribe img-tags, ville det jo være lidt nemmere, du kunne jo bare sætte display:none; på default og så ændre det, når du havde dine størrelses-parametre klar !-)
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.
