[js] Prloaden met message gaat fout.

Pagina: 1
Acties:

  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025
Ej,

ik probeer 17 jpg plaatjes te laten preloaden, en in de tussentijd een bericht te laten zien...
Toch lukt het niet helemaal, imaar ik kan niet ontdekken waar het nou fout gaat.

code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
preloader();
var begin = true;
var counter = 0;
var messages = new Array("Plaatjes worden geladen","Plaatjes worden geladen.","Plaatjes worden geladen..","Plaatjes worden geladen...","Plaatjes worden geladen..","Plaatjes worden geladen.");

function preloader() {
    if(document.getElementById){
        document.getElementById("holder").innerHTML = messages[counter];
    }

    counter++;
    if(counter==messages.length){
        counter = 0;
    }
    homer = setTimeout("preloader()",200);
}


image1 = new Image();   image1.src = "1.jpg";
image2 = new Image();   image2.src = "2.jpg";
image3 = new Image();   image3.src = "3.jpg";
image4 = new Image();   image4.src = "4.jpg";
image5 = new Image();   image5.src = "5.jpg";
image6 = new Image();   image6.src = "6.jpg";
image7 = new Image();   image7.src = "7.jpg";
image8 = new Image();   image8.src = "8.jpg";
image9 = new Image();   image9.src = "9.jpg";
image10 = new Image();  image10.src = "10.jpg";
image11 = new Image();  image11.src = "11.jpg";
image12 = new Image();  image12.src = "12.jpg";
image13 = new Image();  image13.src = "13.jpg";
image14 = new Image();  image14.src = "14.jpg";
image15 = new Image();  image15.src = "15.jpg";
image16 = new Image();  image16.src = "16.jpg";
image17 = new Image();  image17.src = "17.jpg";

var i = 1;
var NowLooping = true;

function GoIntoLoop() {
    if (NowLooping) {
        i++;
        if (i>17) i = 1;
        document.getElementById('panoimg').src=i+'.jpg';
        setTimeout("GoIntoLoop()", 850);    
        if(begin==true) clearTimeout(homer);
    }
}


Dit staat in mijn body en onder <script> staat

code:
1
2
    <span id="holder">&nbsp;</span>
    [img]"1.jpg"[/img]


En in de onload van mijn <body> staat GoIntoLoop() .

Overigens werkte het script zonder de message wel. Ik wou alleen een array met text erbij toevoegen dat je zo cool loading... .. . ziet. met die puntjes. 8)

Iemand die mij opweg kan helpen wat ik hier nu fout doe? Ik werk gewoon met IE en/of FireFox.

*** EDIT: heb ontdekt dat in firefox de melding verschijnt op regel 16, wat "document.getElementById("holder").innerHTML = messages[counter];" is. :x ***

[ Voor 11% gewijzigd door semicon op 14-02-2005 00:18 ]


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:54

crisp

Devver

Pixelated

JavaScript:
1
2
setTimeout("GoIntoLoop()", 850);    
if(begin==true) clearTimeout(homer);

Waar wordt begin op false gezet? En waar ken je een Timeout toe aan de variabele 'homer'?
Overigens is het niet nodig om de image-objects die je in JS aanmaakt ook toe te kennen aan een element in je document.
Dit is de preloader die ik in lemmings gebruik, die werkt redelijk goed:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!-- DHTML Lemmings(TM) - GNU Copyright (c) 2004 by crisp / freesoftware[at]xs4all.nl -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="imagetoolbar" content="no">
<title>DHTML Lemmings™ Loading...</title>
<link rel="stylesheet" href="../style/style.css" type="text/css">
<noscript>
  <meta http-equiv="Refresh" content="0;URL=nojavascript.html">
</noscript>
<script type="text/javascript" src="../js/standards.js"></script>
<script type="text/javascript">

var numpics;
var images = new Array();

function preload_images() {

  if (typeof document.getElementById == 'undefined' ||
      typeof document.createElement == 'undefined') window.location.replace('nojavascript.html');

  var preload_arr = [
    '../img/progressbar.gif',
    '../img/control_bash.gif',
    '../img/control_bash_sel.gif',
    '../img/control_block.gif',
    '../img/control_block_sel.gif',
    '../img/control_build.gif',
    '../img/control_build_sel.gif',
    '../img/control_climb.gif',
    '../img/control_climb_sel.gif',
    '../img/control_dig.gif',
    '../img/control_dig_sel.gif',
    '../img/control_explode.gif',
    '../img/control_explode_sel.gif',
    '../img/control_float.gif',
    '../img/control_float_sel.gif',
    '../img/control_less.gif',
    '../img/control_less_sel.gif',
    '../img/control_mine.gif',
    '../img/control_mine_sel.gif',
    '../img/control_more.gif',
    '../img/control_more_sel.gif',
    '../img/control_nuke.gif',
    '../img/control_nuke_sel.gif',
    '../img/control_pause.gif',
    '../img/control_pause_sel.gif',
    '../img/control_speed.gif',
    '../img/control_speed_sel.gif',
    '../img/hole_basher_l.gif',
    '../img/hole_basher_r.gif',
    '../img/hole_digger.gif',
    '../img/hole_miner_l.gif',
    '../img/hole_miner_r.gif',
    '../img/hole_exploder.gif',
    '../img/lemming_bash_l.gif',
    '../img/lemming_bash_r.gif',
    '../img/lemming_block_l.gif',
    '../img/lemming_block_r.gif',
    '../img/lemming_build_l.gif',
    '../img/lemming_build_r.gif',
    '../img/lemming_climb_l.gif',
    '../img/lemming_climb_r.gif',
    '../img/lemming_climbtop_l.gif',
    '../img/lemming_climbtop_r.gif',
    '../img/lemming_confused_l.gif',
    '../img/lemming_confused_r.gif',
    '../img/lemming_dig_l.gif',
    '../img/lemming_dig_r.gif',
    '../img/lemming_drown_s.gif',
    '../img/lemming_explode_s.gif',
    '../img/lemming_fall_l.gif',
    '../img/lemming_fall_r.gif',
    '../img/lemming_float_l.gif',
    '../img/lemming_float_r.gif',
    '../img/lemming_floatstart_l.gif',
    '../img/lemming_floatstart_r.gif',
    '../img/lemming_frie_s.gif',
    '../img/lemming_home_s.gif',
    '../img/lemming_mine_l.gif',
    '../img/lemming_mine_r.gif',
    '../img/lemming_splut_s.gif',
    '../img/lemming_walk_l.gif',
    '../img/lemming_walk_r.gif',
    '../img/scroll_bg.gif',
    '../img/scroll_bg_sel.gif',
    '../img/scroll_butt.gif',
    '../img/scroll_left.gif',
    '../img/scroll_left_sel.gif',
    '../img/scroll_right.gif',
    '../img/scroll_right_sel.gif',
    '../img/lemming_left.gif',
    '../img/lemming_right.gif',
    '../img/fun.gif',
    '../img/logo.gif',
    '../img/taxing.gif',
    '../img/tricky.gif',
    '../img/mayhem.gif',
    '../img/target.gif',
    '../img/target_left.gif',
    '../img/target_right.gif',
    '../img/vinkje.gif'
  ];

  numpics = preload_arr.length;

  preload(preload_arr);

}

function preload(arr) {

  for (var i = 0; i < arr.length; i++) {

    images[i] = new Image();
    images[i].loaded = false;
    images[i].onload = imgloaded;
    images[i].onerror = imgloaded;
    images[i].onabort = imgloaded;
    images[i].src = arr[i];

  }

  setTimeout('progress()', 100);

}

function imgloaded() {

  this.loaded = true;

}

function progress() {

  var curprogress = 0;
  for (var i = 0; i < numpics; i++) {

    if (images[i].complete || images[i].loaded) {

      images[i].loaded = true;
      curprogress++;

    }

  }

  var w = Math.round(curprogress * (560 / numpics));
  document.getElementById('progressbar').style.width = w+'px';

  if (curprogress == numpics) setTimeout('window.location.replace(\'menu.html\');', 2000);
  else setTimeout('progress()', 100);

}

</script>
</head>
<body onload="preload_images()">
<div id="content">
<div id="loading">Loading DHTML Lemmings™....</div>
<div id="progressbar"> </div>
<div id="version"><script type="text/javascript">document.write(version+' '+formatdate(rts));</script></div>
<div id="copyright"><a href="gpl.html" target="_self" onfocus="this.blur()">GNU copyright</a> © 2004 by crisp - <a href="mailto:freesoftware@xs4all.nl" target="_blank" onfocus="this.blur()">freesoftware[at]xs4all.nl</a></div>
</div>
</body>
</html>

Intentionally left blank


  • semicon
  • Registratie: Augustus 2003
  • Laatst online: 20-08-2025
ik dank u weer eens voor de informatie, dit is alleen wel een pagina VOOR de pagina die in beeld moet komen. maar dat is niet zon probleem, hij werkt in ieder geval! :D