Preload af billeder

Hej, du behøver i princippet slet ikke bruge JavaScript. Det kan også gøres på følgende måde. Det synes jeg personligt er nemmere, så henter den bare et "Henter billede..."-billede i baggrunden og når den så har hentet det originale vil det rigtige blive vist oven på loading.gif :-)

<table cellspacing="0" cellpadding="0" style="width:100%; height:100px;">

<tr>
<td style="width:25%; background-image: url('loading.gif');"><img src="billede1.jpg" /></td>
<td style="width:25%; background-image: url('loading.gif');"><img src="billede2.jpg" /></td>
<td style="width:25%; background-image: url('loading.gif');"><img src="billede3.jpg" /></td>
<td style="width:25%; background-image: url('loading.gif');"><img src="billede4.jpg" /></td>
</tr>

</table>

Hej

det er en fin idé.

Jeg ville gerne undgå denne loade effekt hvor den hente billedet oppe fra og kører ligeså stille ned. (typisk med en 56k og et billede på 2500kb)

så har ledt efter det her preloader med procesbar men den virker kun med flere billeder.

Det kan du faktisk også sagtens gøre:

<img id="billede1" src="loading.jpg" style="width:XXpx;height:XXpx">
<img id="billede2" src="loading.jpg" style="width:XXpx;height:XXpx">
<img id="billede3" src="loading.jpg" style="width:XXpx;height:XXpx">
<img id="billede4" src="loading.jpg" style="width:XXpx;height:XXpx">

<script type="text/javascript">
var billeder = ["billede1","billede2","billede3","billede4"], imgs = [];
window.onload = function(){
  for(i=0,im=billeder.length;im>i;i++){
    imgs[i] = new Image();
    imgs[i].src = billeder[i] + ".jpg";
    imgs[i].onload = function(){
      document.getElementById(billeder[i]).src = this.src;
    }
  }
}
</script>

Bemærk størrelses-angivelsen, som sikkert vil være nødvendig for at få det til at fungere ...

-- absolut utestet !-)

hej

jeg kan godt se fidusen, jeg får bare en fejl i "document.getElementById(billeder[i]).src = this.src;"

Jeg har ikke sat mig så meget ind i javascript, men kan det lade sig gøre lave javascript og billede i samme, hmm gruppe? så jeg kan hive det ud i en løkke ?
eks.

'løkke begynd
<img id="1" src="loading.jpg" style="width:XXpx;height:XXpx">
<script type="text/javascript">
window.onload = function(){
    imgs[billede1] = new Image();
    imgs[billede1].src = "billede1" + ".jpg";
    imgs[billede1].onload = function(){
    }
  }
</script>
'løkke slut

ID'er må ikke starte med et tal. Prøv med "a1" i stedet..

Okay

nu får jeg hvertfal ikke en fejl men den sætter stadig ikke et billede ind.

<img id="a1" src="loading.gif" style="width:50px;height:50px">
<script type="text/javascript">
window.onload = function(){
    imgs[billede1] = new Image();
    imgs[billede1].src = "billede1" + ".jpg";
    imgs[billede1].onload = function(){
    }
  }
</script>

Hvad mener du med "så jeg kan hive det ud i en løkke"? Får du filnavne fra f.eks. ASP eller PHP (eller et andet serverside scriptsprog)?

Problemet med din kode i 23/10-2006 20:10:40, er at du ikke har defineret hverken "imgs" eller "billede1".. og hvis du havde gjort det, ville billedet bare indlæse "billede1.jpg"-filen..


Forklar lige det med løkken.. ellers burde koden fra 22/10-2006 23:51:18 virke fint..

Jeg ved ikke om det hjælper, men her er en forklaring på koden fra 22/10-2006 23:51:18:

- Opret en array kaldet "billeder", der indeholder værdierne "billede1","billede2","billede3","billede4".

- Opret en array kaldet "imgs", uden at definere længde og indhold.

- når siden loades, afvikles noget kode:

-- FOR-løkken:

--- definer variablen "i", og sæt dens værdi til 0
--- definer variablen "im", og sæt dens værdi til længden (antallet) af elementer i arrayen "billeder"
--- så længe at antallet af elementer er større værdien i variablen "i", læg 1 til værdien af variablen "i"

---- Følgende kode gentages indtil antallet af elementer ikke er større en værdien af "i":

----- indsæt nyt element, af typen "image", i arrayen "imgs"
----- sæt elementetes src (source/filnavn) til indeholdet af elementet i arrayen "billeder", og tilføj ".jpg"
----- sæt en event kaldet "onload" på elementet, så den afvikler noget kode, når billedet er loadet færdigt.

------ Til billedet med samme navn, som indholdet af elementet i arrayen "billeder", sættes stien til den sti der er sat ind i elementet, i arrayen "imgs"

Hej igen

Hvis jeg skal benytte mig af arrays, skal jeg først lave en løkke for at lave et array udfra databasen. derefter skal jeg lave en ny løkke det looper arrayet igennem.

Dette vil jeg gerne udenom og ville derfor gerne have billede og javascript samlet så jeg kunne nøjes med en løkke.

billede sti/navn bliver hentet fra database og skal sådan set bare hives ud. Men hvordan lige ?

håber det besvarede spørgsmålet og nogen kan hjælpe ?

Hvis billederne er samlet, kan du bruge en DIV som du opdaterer.

Ellers bliver du nødt til at udskrive HTML-kode + JavaScript-kode, for hver eneste billede du har i din database..

Altså:

<img ...>
<script...>
// JavaScript kode her
</script>

<img ...>
<script...>
// JavaScript kode her
</script>

<img ...>
<script...>
// JavaScript kode her
</script>

osv..

Hvis 1) "billederne ikke er samlet" OG 2) "du ikke vil udskrive 1x HTML+JavaScript for hvert eneste billede", skal du lave 2 løkker:

Løkke 1: Udskriv HTML koden (<img id="..." ...>)
Løkke 2: Udskriv JavaScript kode, som opdaterer id="..."


Og et sidste spørgsmålet: Hvilket sprog bruger du, til at hente data fra databasen med?

Ja præcis, vil gerne have det:

<img ...>
<script...>
// JavaScript kode her
</script>

og bruger vb.net

Hmm.. Lidt underlig måde at gøre det på, men ok.. :-)

Jeg vil se om jeg kan bikse noget sammen i morgen.. selvom VB.NET ikke lige er mig.. :-)

Jeg kan dog ASP, VB, JavaScript og C#.. men VB.NET ligger jo sådan set i det område.. :-)

Jamen så siger jeg mange tak.

hvis du kan lave det i asp er det også fint.

Jeg beklager at jeg ikke har fået kigget på det endnu.. Jeg har haft travlt med projekt i skolen, så det er begrænset hvad jeg har kigget på, af Eksperten-relaterede projekter.

Jeg håber på at få kigget på det i dag.. Hvis alt går vel, skulle jeg gerne smide et ASP-eksempel på Eksperten i dag.

Lidt senere end jeg havde regnet med.. men her er eksemplet:

ASP-kode:

<html>
<head>
<title>sidens titel</title>
</head>
<body>

<%
dim i, taeller ' Denne fjernes ved brug af DO-WHILE løkke
taeller = 0 ' Denne fjernes ved brug af DO-WHILE løkke

dim asp_billede_fejl: asp_billede_fejl = "fejl.gif" ' vises hvis billedet (filen) ikke eksisterer

dim asp_billede, asp_billede_uden_filtype


'Normalt ser ASP koden sådan ud:
'
'if (rs.bof or rs.eof) then
'    response.write "Der er ingen poster med de valgte kriterier."
'else
'    do while not rs.eof ' Her er DO-WHILE-løkken

for i = 0 to ubound(arrRS) ' Denne linie erstattes af DO-WHILE-løkke

    asp_billede = rs("navnet_på_feltet_i_databasen_der_indeholder_filnavn") ' REDIGER DENNE HER!
    asp_billede_uden_filtype = left(asp_billede, instrrev(asp_billede, ".") - 1)
%>

<img id="<%=asp_billede_uden_filtype%>" src="loading.gif" onerror="this.src='<%=asp_billede_fejl%>'" style="width:50px;height:50px;border: 1px solid #000000">

<script type="text/JavaScript" language="JavaScript">
document.getElementById("<%=asp_billede_uden_filtype%>").src = "<%=asp_billede%>";
</script><br>

<%
    taeller = taeller + 1 ' Denne fjernes ved brug af DO-WHILE løkke

    ' ASP, DO-WHILE løkke: rs.movenext
    ' ASP, DO-WHILE løkke: loop
    next ' Denne fjernes ved brug af DO-WHILE løkke

    ' Husk at afslutte IF-sætningen, når du bruger DO-WHILE-løkken i ASP:
    'end if
%>
</body>
</html>



Output (sådan ser HTML/JavaScriptet ud efter afvikling af koden):

<html>
<head>
<title>sidens titel</title>
</head>
<body>

<img id="billede1" src="loading.gif" onerror="this.src='fejl.gif'" style="width:50px;height:50px;border: 1px solid #000000">
<script type="text/JavaScript" language="JavaScript">
document.getElementById("billede1").src = "billede1.jpg";
</script><br>

<img id="billede2" src="loading.gif" onerror="this.src='fejl.gif'" style="width:50px;height:50px;border: 1px solid #000000">
<script type="text/JavaScript" language="JavaScript">
document.getElementById("billede2").src = "billede2.jpg";
</script><br>

<img id="billede3_" src="loading.gif" onerror="this.src='fejl.gif'" style="width:50px;height:50px;border: 1px solid #000000">
<script type="text/JavaScript" language="JavaScript">
document.getElementById("billede3_").src = "billede3_.jpg";
</script><br>

<img id="billede4" src="loading.gif" onerror="this.src='fejl.gif'" style="width:50px;height:50px;border: 1px solid #000000">
<script type="text/JavaScript" language="JavaScript">
document.getElementById("billede4").src = "billede4.jpg";
</script><br>

</body>
</html>


Jeg ved ikke lige hvor vigtigt det er med "onload" på selve billedet.. det fungerer fint uden det, så jeg har fjernet det og loader filnavnet direkte..

1) Hvis du kalder dit recordset noget andet en "rs", skal du ændre rs("noget her") til f.eks. recset("noget her"), hvis dit recordset hedder "recset"

2) Ændre "navnet_på_feltet_i_databasen_der_indeholder_filnavn" til navnet på feltet i din database, der indeholder filnavnet på billedet, i linien (ret også navnet på recordset'et, hvis det ikke er "rs"):
    asp_billede = rs("navnet_på_feltet_i_databasen_der_indeholder_filnavn") ' REDIGER DENNE HER!

3) Da jeg har simuleret en database, via noget ASP kode (en array), er der nogle ting du skal ændre, når du bruger databasen:

- Fjern kommenter ('-tegnet) foran denne kodeblok (Husk recordset'et "rs"):
'if (rs.bof or rs.eof) then
'    response.write "Der er ingen poster med de valgte kriterier."
'else
'    do while not rs.eof ' Her er DO-WHILE-løkken

- Slet denne linie:
for i = 0 to ubound(arrRS) ' Denne linie erstattes af DO-WHILE-løkke

- Slet denne linie:
next

- Slet alle linier der er efterfulgt af denne kommentar:
' Denne fjernes ved brug af DO-WHILE løkke

Så burde du have ASP koden, der skal arbejde sammen med databasen.

..og så lige et svar.. :-)

Du mangler lige at markere mit navn i boksen til venstre, og derefter klikke på Accepter-knappen.. :-)

Jo mange tak for hjælpen.