Notifikationer

Markér alle som læst Log ud

sonic666 Novice

13. april 2003 - 11:42 Der er 12 kommentarer og
1 løsning

load alle filer inden siden vises

jeg har lavet en thumpnail side med en masse onmouseover gif animationer.Er det muligt at man kan sætte siden til at loade alle thumps og gif´er når man går ind på siden?
Istedet for at animationerne først loades på mouseover. Så forsvindr effekten nemlig lidt.

Tjek siden her hvis du er i tvivl om hvad jeg mener http://www.3am.dk/lc/spi.htm

Håber nogen kan hjælpe

Synes godt om

olebole Juniormester

13. april 2003 - 12:56 #1

<ole>

<script type="text/JavaScript">
var pics = new Array(
"pic1.gif",
"pic2.gif",
"pic3.gif",
"pic4.gif"
);
for (i=0; i<pics.length; i++) {
var im = new Image();
im.src = pics[i];
}
</script>

/mvh
</bole>

Synes godt om

olebole Juniormester

13. april 2003 - 13:01 #2

Den gør egentlig det samme som den du allerede har:

billede1 = new Image();
billede1.src = "billede1.gif";

billede2 = new Image();
billede2.src = "billede2.gif";

Men min er lidt slankere og mere generisk.
Du skal selvfølgelig sørge for at skrive de rigtige billednavne - incl. stien til billederne - i array'et ;o)

Synes godt om

sonic666 Novice

14. april 2003 - 12:32 #3

Er det såden jeg skal ændre filnavn + sti i arrayet?

<script type="text/JavaScript">
var pics = new Array(
"billeder/Animation1.gif",
"billeder/Animation2.gif",
"billeder/Animation3.gif",
"billeder/Animation4.gif"
);
for (i=0; i<pics.length; i++) {
var im = new Image();
im.src = pics[i];
}
</script>

Hvad skal der så laves om i koden i body´en?

<a href="#"
onclick="popup('billeder/1.job.asp','mitvindue','350','532')"
onmouseover="new image('pic1','billeder/Animation1.gif')"
onmouseout="new image('pic1','billeder/thump.jpg')">
<img name="pic1" src="billeder/thump.jpg"
alt="Klik Nu!" style="border:none;">
</a>

Håber du kan hjælpe mig med det sidste. Vil dette gør sådan at alle gif´er bliver loadet med det samme, så der ikke opstår ventetid senere?

Synes godt om

olebole Juniormester

14. april 2003 - 12:40 #4

Du skal have en skifte funktion:

function swap(im, im_src) {
document.images[im].src = im_src;
}

Og kalde sådan:

<a href="#"
onclick="popup('billeder/1.job.asp','mitvindue','350','532');return false"
onmouseover="swap('pic1','billeder/Animation1.gif')"
onmouseout="swap('pic1','billeder/thump.jpg')">
<img name="pic1" src="billeder/thump.jpg"
alt="Klik Nu!" style="border:none;"></a>

Eller endnu nemmere:

<img name="pic1" src="billeder/thump.jpg"
alt="Klik Nu!" style="border:none;"
onclick="popup('billeder/1.job.asp','mitvindue','350','532')"
onmouseover="swap('pic1','billeder/Animation1.gif')"
onmouseout="swap('pic1','billeder/thump.jpg')">

/mvh

Synes godt om

olebole Juniormester

14. april 2003 - 12:41 #5

Den sidste virker dog ikke, hvis brugeren har slået grafikvisning fra ... eller kommer ind med en ren tekstbaseret browser (Lynx, el.lign.)

Synes godt om

sonic666 Novice

14. april 2003 - 12:46 #6

ok... kan du vise hvor skiftefunktionen skal sættes ind?
I scriptet eller i body´en?

det med browseren betyder ikke noget :-)

Synes godt om

olebole Juniormester

14. april 2003 - 13:48 #7

Dette sætter du ind i din head - og sletter de scripts, du har nu:

<script type="text/JavaScript">
var pics = new Array(
"pic1.gif",
"pic2.gif",
"pic3.gif",
"pic4.gif"
);
for (i=0; i<pics.length; i++) {
var im = new Image();
im.src = pics[i];
}

function swap(im, im_src) {
document.images[im].src = im_src;
}
</script>

/mvh

Synes godt om

sonic666 Novice

14. april 2003 - 13:58 #8

cool! nu virker den. lige en sidste ting. Jeg prøver lige at forstå hvad koden gør :-)
"length" hvad er det? skal det være et tal eller...

Hvad er det der gør at alt bliver loaded med det samme? Er det at man opretter et array istedet for at kalde filerne i det enkelte i det enkelte link.

Men ellers super mange gange tak for hjælpen. :-)

Synes godt om

tobias_louv Nybegynder

14. april 2003 - 14:23 #9

//index.htm

<html>
<head>

<script>

///////////////////////////////////////////////
// PUT ALL IMAGES IN AN ARRAY FOR PRELOADING //
///////////////////////////////////////////////
var pics = new Array("dog1.jpg", "dog2.jpg", "dog3.jpg", "dog4.jpg", "dog5.jpg" ,"a.gif", "b.gif", "c.gif", "d.gif", "e.gif", "f.gif", "g.gif", "h.gif", "i.gif", "j.gif", "k.gif", "l.gif", "m.gif", "n.gif", "freefoto.gif");

///////////////////////////////////////////////////
// ENTER URL TO GOTO AFTER IT FINSHES PRELOADING //
///////////////////////////////////////////////////
var url = "done.html";

////////////////////////////////////////////////////
// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING? //
////////////////////////////////////////////////////
var doConfirm = true;

////////////////////////////////////
// ALLOW USER TO SKIP PRELOADING? //
////////////////////////////////////
var canSkip = false;

////////////////////////////////////////////////////////////////////////////////////
//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//
////////////////////////////////////////////////////////////////////////////////////

var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;

function getLayer(layerID) {
if (document.getElementById)
return document.getElementById(layerID);
else if (document.all)
return document.all[layerID];
else
return null;
}

function updateBar() {
statLayer.innerHTML = "<font face=\"Arial\" color=\"#FFFFFF\"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
{
cPercent = percent;
barLayer.style.width = (cPercent*3) +"px";
percentLayer.innerHTML = "<font color=\"#BBBB00\"><B>" +cPercent+ "%</B></font>";
}
if (loaded == total)
{
doneMsgLayer.innerHTML = "<a href=\"java script:done()\"><font face=\"Arial\" color=\"#FFCC00\" size=\"2\"><B>Done (Click Here)</B></font></a>";
if (!doConfirm || (doConfirm && confirm("Files have finish loading, continue to next page?")))
done();
}
}

function startLoading() {
if (document.getElementById || document.all)
{
barLayer = getLayer("bar");
percentLayer = getLayer("percent");
statLayer = getLayer("stat");
doneMsgLayer = getLayer("doneMsg");
if (canSkip)
doneMsgLayer.innerHTML = "<a href=\"java script:done()\"><font color=\"#FFCC00\" size=\"2\" face=\"Arial\">Skip Pre-Loading</font></a>";
for (i=0; i<pics.length; i++)
{
imgObjs[i] = new Image();
imgObjs[i].onload = imgLoaded;
imgObjs[i].onerror = imgFailed;
imgObjs[i].src = pics[i];
}
}
else
{
alert("You are likely running very old browser which is not compatible with preloading script. Maybe it is time to update your browser.\n\nProgram is skipping preloading.");
window.location.replace(url);
}
}

function done() {
window.location.replace(url);
}

function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this. The program will skip this file now.");
loaded++;
updateBar();
}

function imgLoaded() {
loaded++;
updateBar();
}

</script>
</head>

<body bgcolor="#002080" onLoad="startLoading()">

<div id="msg" style="position:absolute; top:0px; left:50px; width:200px; height:20px;"> <font face="Arial" size="4" color="#DDDDDD">Loading...</font></div>
<div id="bg" style="position:absolute; top:0px; left:200px; background-color: #DDDDDD; width:300px; height:20px;"> </div>
<div id="bar" style="position:absolute; top:0px; left:200px; background-color: #000000; width:1px; height:20px;"> </div>
<div id="percent" style="position:absolute; top:0px; left:330px;"><font color="#BBBB00"><B>0%</B></font></div>
<div id="stat" style="position:absolute; top:0px; left:520px;"><font face="Arial" color="#FFFFFF"><B>0/0</B></font></div>
<div id="doneMsg" style="position:absolute; top:0px; left:620px;"></div>

<div id="doneMatter" style="position:absolute; top:30px; left:0px; width:700px;">
<center><font color="#FFFFFF" face="Arial" size="2">Please wait while the computer preloads some files for you.</font></center><BR>







<BR>
<center>
<font color="#FFFFFF" face="Arial" size="2">
Script by:<BR>
<a href="http://www.pokw.com">Pok-Ching Lee</a><BR>
</font>
<BR><BR><BR>
<font color="#DDDDDD" size="1">© Copyright 2002. Pok-Ching Lee. All Rights Reserved.</font>
</center>
</div>

</body>
</html>

//done.htm

<html>
<head>
<title>Page Done</title>
</head>
<body>
All these images totaling 165KB were preloaded before this page.<BR>
<img src="a.gif">
<img src="b.gif">
<img src="c.gif">
<img src="d.gif">
<img src="e.gif">
<img src="f.gif">
<img src="g.gif">
<img src="h.gif">
<img src="i.gif">
<img src="j.gif">
<img src="k.gif">
<img src="l.gif">
<img src="m.gif">
<img src="n.gif"><BR><BR><BR>

I like dogs :)<BR>
<img src="dog1.jpg">
<img src="dog2.jpg">
<img src="dog3.jpg">
<img src="dog4.jpg">
<img src="dog5.jpg"><BR>

</body>

Synes godt om

olebole Juniormester

14. april 2003 - 14:38 #10

pics er et array.
Et array er en slags liste, som du kan sammenligne med et langt 'futtog' du har lavet af papæsker, der er bundet sammen af snore.
I disse æsker kan man så lægge småsedler, hvor man f.eks. skriver tekst eller tal.
Nu kan man så trække dette 'futtog' rundt mellem funktioner ... som så kan tage sedlerne op og læse dem og lægge dem tilbage - eller evt. skrive noget nyt og lægge dem tilbage igen.

For at læse, hvad der står på sedlen i en bestemt æske, kan du sige:
var bla = pics[2];
alert(bla);
Så dykker vi ned i den tredie æske (den første æske i 'toget' har nummer 0), læser sedlen og 'læser' den højt med alert'en.

Et array har en property (egenskab), der hedder length. Den beskriver antallet af pladser (æsker), der er i array'et.
Når vi skriver:
for (i=0; i<pics.length; i++) {
var im = new Image();
im.src = pics[i];
}
bladrer vi array'et igennem fra første til sidste plads. For hver plads opretter vi et nyt billed-objekt og lægger det i en variabel 'im':
var im = new Image();
Et billed-objekt har alle de egenskaber, et almindeligt billede i HTML-koden har ... bortset fra, det ikke er synligt. Et billed-objekt er derudover lidt at sammenligne med en skifteramme, som vi kan skifte billedet i - fuldstændig ligesom et billede i HTML-koden.

I linien:
im.src = pics[i];
tildeler vi billed-objektet en kilde (source) ... vi sætter et billede i rammen.

Når først, vi har sat en kilde på et billed-objekt, downloades billedfilen til harddisken og lægges i mappen, der indeholder midlertidige WWW-dokumenter. I en standard Win-installation er det:
C:\Documents and Settings\BRUGERNAVN\Local Settings\Temporary Internet Files

Denne mappe kaldes også browserens cashe. Herfra vil browseren nu hente filen i stedet for at hente den over WWW. Den genkender stien og filens navn og 'tænker': "Den har jeg zq da set før .... den må jeg da have liggende hernede et sted.". Hvorefter den hentes lokalt i stedet. Billedet er 'preloaded'.

For lige at pinde en for-løkke ud:
for (i=0; i<pics.length; i++) {
// Her står noget kode
}
betyder det:
1. Vi opretter en variabel 'i' og sætter den til 0.
2. Vi afvikler koden mellem Tuborg-klammerne.
3. Hvergang koden er udført, tæller vi 'i' én op og kører koden igen.
4. Sålænge 'i' er mindre end antallet af pladser i 'pics' fortsætter løkken med at 'køre i ring'.

Jeg håber, det hjalp på forståelsen. Det plejer somregel at virke, hvis man distancerer sig lidt fra computeren og forklarer med hverdags-billeder ... det er ikke et forsøg på at tale ned til dig ;o)
Så havde jeg gjort det med meget færre ord ... og du havde ikke været i tvivl *LooOooL* :D
/mvh

Synes godt om

olebole Juniormester

14. april 2003 - 14:46 #11

tobias_louv >> Det var vist ikke det, der blev efterlyst - og jeg har aldrig kunnet se det smarte i at fylde siden op med unødig kode (og sideskift), der gør den endnu tungere, når problemet er, den i forvejen er tung :)
/mvh

Synes godt om

sonic666 Novice

14. april 2003 - 15:10 #12

tak for det fine svar :-)

Synes godt om

olebole Juniormester

14. april 2003 - 15:29 #13

... anytime ;o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS