Søg
Avatar billede the_unseen Nybegynder
20. april 2003 - 17:34 Der er 16 kommentarer og
1 løsning

Preloadbar m. grafik

Her kommer endnu et spørgsmål ang. preload af grafikfiler til alm. html-dokumenter.

Jeg har behov for et script som preloader de billeder jeg definerer samt samtidigt viser brugeren, hvor langt den er nået. Visningen skal ske ved en grafisk repræsentation, hvor et billede på 280px x 20px repræsenterer preloadbarens baggrund. Denne baggrund overdækkes i takt med at billederne loades med et andet billede, som skal fremstå således at det ser ud som om der er en bar der går fra venstre mod højre og når den når helt ud til højre (i billedfeltet!) er alle billederne preloaded og der redirectes til et andet html-dokument.

Der er altså tale om en preload-bar som består af to grafikfiler og et script således at jeg 100% kan bestemme, hvad der skal dukke frem som indikator på preloadens fremgang.

Hvis nogen kan hjælpe med dette vil jeg være meget taknemmelig da mine evner på dette område ikke er specielt veludviklede. Jeg har behov for et godt link eller gerne en færdig el. modificerbar kode.

Jeg har IKKE behov for links til sites som beskriver andre former for preloadbarer - dvs. de traditionelle preloadbarer uden koblingen til grafikfiler er uinteressante.


Håber nogle kan og vil hjælpe!


Mvh.
The Unseen
-/-
Avatar billede mortrr Praktikant
20. april 2003 - 18:14 #1
Hvis du vil vide hvor langt siden er er med at loade billeder, kan du bruge onload på på img'tags til at fortælle dig at et billede er hentet.

Som fx:
<html>
<script>
var imgCount=10;
var imgLoaded=0;
function imgLoad() {
    imgLoaded++;
    document.getElementById("divPR2").style.width=Math.round(280/imgCount*imgLoaded);
}
</script>
<body onload="document.location.href='nyside.htm'">
<img style="position:absolute;left:0;top:20;width:280;height:20;z-index:1" src="preload1.gif">
<div id="divPR2" style="position:absolute;left:0;top:20;width:280;height:20;z-index:1;overflow:hidden"><img src="preload2.gif" width=280 height=20></div>
<img src="test0.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test1.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test2.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test3.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test4.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test5.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test6.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test7.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test8.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
<img src="test9.jpg" style="display:none" width=1 height=1 onload="imgLoad()">
</body>
Avatar billede cdc Novice
20. april 2003 - 18:14 #2
sådan her: http://www.cdcmedia.dk/hiphop/foto/preload_image_page.htm
Avatar billede Slettet bruger
20. april 2003 - 19:56 #3
<script>
bill = new Array("billede1.jpg", "billede2.jpg", "billede3.jpg"); //Billederne, der skal preloades

i = 0;
pb = new Array();

function preload() {
  pb[i] = new Image();
  pb[i].src = bill[i];
  setTimeout("tjek();", 100);
}

function tjek() {
  if (pb[i].complete) {
    document.getElementById("loadbar").style.width = Math.round(++i / bill.length * 100) + "%";
    preload();
  }
  if (i < bill.length)
    setTimeout("tjek();", 100);
}
</script>

<body onLoad="preload();">

<div style="width: 280px; height: 20px; background-image: url('din_baggrund.gif');">
<div id="loadbar" style="width: 0%; height: 20px; background-image: url('din_baggrund.gif'); font-size: 0px;">&nbsp;</div>
</div>
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:05 #4
> cdc
Nej! Ikke sådan der... Hehehe: Det er jo nærmest bare en www.dynamicdrive.com preload-bar i dhtml og java. Det er ikke det jeg fisker efter.

> phoenixv
Hvilket element i dit script repræsenterer mit billede for preload-baren?

> mortrr
Jeg skal lige have lidt mere forklaring til dit script. Jeg er ikke haj til javascript :-) sorry...
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:14 #5
> phoenixv

Ok det må være den nederste dvs. <div id="loadbar" osv. - min fejl. Jeg tjekker lige om molevitten virker som jeg vil ha' det...


Mvh.
The Unseen
-/-
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:23 #6
Okay genier. Hvordan får vi så hele molevitten til at være bundet til midten af skærmen horisontalt og toppen af skærmen vertikalt (skal kunne indstilles til et bestem antal pixels!).

:-)

> phoenixv
Mangler der ikke en reference til den side den skal viderestilles til?

> mortrr
Jeg prøver på din måde bagefter - hver tålmodig :-)
Avatar billede cdc Novice
20. april 2003 - 21:28 #7
Nu skriver du ikke at det; IKKE skal være en www.dynamicdrive.com preload-bar i dhtml og java. Jeg har kun også lagt en kommentar, da jeg ikke er helt med på hvad du mente, og derfor kun gjorde det for at få dig i dialog.
Men du har vist fundet en løsning eller hjælp så jeg trækker mig
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:29 #8
> phoenixv

Det virker ikke ordenligt! Den stopper når den er næsten færdig og så sker der ikke mere fordi der mangler en viderestillingsreference.


> mortrr

Jeg prøver din udgave nu - tror den virker - kan da se at den indeholder et viderestillingselement.


> Jer begge

Når lortet virker - hvordan kan jeg så udbygge dette script til i stedet for at viderestille til en anden side så blot at lade baren være fyldt helt ud og i stedet vise et par knapper i form af OnMouseOver billeder med links???
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:39 #9
> mortrr

Lige et bonus-spørgsmål: Hvordan centrerer jeg dit script horistontalt og binder det til toppen af browservinduet vertikalt pr. pixel?

Og... : Hvordan lader jeg viderestillingselementet åbne et nyt vindue defineret i størrelse og med eller uden de klassiske elementer som scrollbars m.v.??? Det originale vindue med preloadbaren på 100% skal forblive nedenunder...

Kan det klares eller er det for meget forlangt... :-)
Avatar billede the_unseen Nybegynder
20. april 2003 - 21:41 #10
> cdc
Nu ikke fornærmet - jeg var skam glad for din kommentar... Den side du refererer til benytter blot en www.dynamicdrive.com preloadbar som også er ganske fiks og udemærket, men bare ikke helt det jeg fisker efter. Det var ikke ondt ment.

Tak for eksemplet. (Nu kan alle jo heller ikke lige vide hvad jeg mener med en www.dynamicdrive.com preloadbar :-)
Avatar billede Slettet bruger
21. april 2003 - 10:42 #11
Det er unødvendigt med alle de img-tags, som mortrr har i sin kode.
Ændr i stedet min funktion "tjek" til dette:

function tjek() {
  if (pb[i].complete) {
    document.getElementById("loadbar").style.width = Math.round(++i / bill.length * 100) + "%";
    if (i == bill.length) {
      self.location.href = "din_side.html"; //Siden, der skal redirectes til
      return;
    }
    preload();
  }
  setTimeout("tjek();", 100);
}
Avatar billede the_unseen Nybegynder
21. april 2003 - 12:40 #12
> phoenixv

Ja det kan jeg se :-)

Men hvordan får jeg så scriptet til at vise sig centreret i forhold til bredden af browservinduet og præcist defineret i pixel fra toppen af browservinduet?

Samt hvordan indføjer jeg i self.location.href="min_side.html"; at der skal åbnes et nyt vindue f.eks.

Belønningen for de korrekte svar skal nok være gavmild :-)
Jeg synes umiddelbart det er en hård nød at knække (specielt den med centreringen!).


Mvh.
The Unseen
-/-

NB. God påske til alle (nu er den jo snart forbi - snøft!)
Avatar billede Slettet bruger
21. april 2003 - 12:45 #13
For at åbne et nyt vindue:

function tjek() {
  if (pb[i].complete) {
    document.getElementById("loadbar").style.width = Math.round(++i / bill.length * 100) + "%";
    if (i == bill.length) {
      window.open("din_side.html", "nytVindue"); //Siden, der skal redirectes til
      return;
    }
    preload();
  }
  setTimeout("tjek();", 100);
}

For at centrere og placere:

<div style="position: absolute; left: 0px; top: 200px; width: 100%; text-align: center;">
<div style="width: 280px; height: 20px; background-image: url('din_baggrund.gif');">
<div id="loadbar" style="width: 0%; height: 20px; background-image: url('din_baggrund.gif'); font-size: 0px;">&nbsp;</div>
</div>
</div>

Det placerer den 200px fra toppen.
Avatar billede the_unseen Nybegynder
21. april 2003 - 12:55 #14
> phoenixv

Hey det ser umiddelbart fint ud. Jeg skal lige spise frokost - så prøver jeg at få det til at virke i mit eget regí. Bliv endeligt hængende.

Jeg plejer ikke at have så mange problemer med noget som helst, men her der ser det sgu' ud som om du har bibragt løsningen på et problem jeg har haft gennem flere år. Og som ikke kun knytter sig til preloadbar, men stort set til alle de problemer jeg har haft med div-id funktioner de sidste 2½ år...

Men jeg sparer lige lidt på ekstasen indtil jeg har testet at det rent faktisk virker...


Mvh.
The Unseen
-/-

NB. Hov lige endnu et bonus?: Hvis jeg nu vil definere egenskaberne for det nye browservindue som jeg plejer med bredde, højde, scrollbars, ingen knapper, ingen adresselinie m.v. - så må det da kunne implementeres ikke? Svar kun hvis du lige sidder og ved det - ellers finder jeg ud af det selv, så meget javascript har jeg da efterhånden lært...

:-)
Avatar billede the_unseen Nybegynder
21. april 2003 - 15:28 #15
> phoenixv

Nu er det testet...

Der er ét problem tilbage såvidt jeg kan se:

Nu er preloadbaren placeret præcist dér hvor den skal. Problemet er nu blot at når den preloader bevæger baren sig også fra midten og ud mod siderne - i stedet for fra venstre til højre. Kan dette problem overhovedet løses...?

Men bare kombinationen af at centrere horisontalt og definere vertikalt er jeg meget taknemmelig for - så phoenixv: Du har allerede tjent dine points hjem + nogle bonuspoints fordi du indirekte også har løst en række andre spørgsmål jeg har haft på eksperten som ingen rigtigt har kunnet løse, men nu kan jeg ud fra dine svar her kombinere mig frem til en hel del andre features som ellers ikke ses på Internettet, hvis da ikke lige det er flash...

Anywayz: Hvis du kan løse problemet med center-ud preload og få den til at blive hvor den er nu og gå fra 0% ved venstre til 100% ved højre er det bare perfekt...

Tak skal du ha'


Mvh.
The Unseen
-/-
Avatar billede Slettet bruger
22. april 2003 - 15:15 #16
Dette burde virke:

<div style="position: absolute; left: 0px; top: 200px; width: 100%; text-align: center;">
<div style="width: 280px; height: 20px; background-image: url('din_baggrund.gif');">
<div id="loadbar" style="width: 0%; height: 20px; background-image: url('din_baggrund.gif'); text-align: left; font-size: 0px;">&nbsp;</div>
</div>
</div>

Og jo, hvis du vil åbne et vindue med særlige features, gør du bare som normalt med window.open.
Avatar billede Slettet bruger
22. april 2003 - 15:15 #17
Svar
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
30/0815:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »