Javascript wil niet langzamer
Ik heb een javascriptje gemaakt dat afbeeldingen van wolken laat bewegen van rechts naar links.
Het probleem is dat de wolken veel te snel gaan, en ik heb al van alles geprobeerd. De interval milliseconden meer of minder zetten heeft totaal geen (merkbaar) verschil in snelheid. De wolken gaan zo snel dat je ze zelfd bijna niet ziet.
IK heb altijd zo'n soort rare problemen met javascript.
Hier is mijn code:
Code (php)
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
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
<style>
.cloud {
position: absolute;
left: 1200px;
top: 100px;
border: 2px solid red; /* Debugging */
}
</style>
<script>
var aClouds = [];
var cloudUrls = ["cloud-1.png"];
var cloud = function() {
this.image = "";
this.moveSpeed = 100;
this.movePx = 10;
this.left = 1000;
this.create = function() {
this.image = document.createElement("img");
this.image.src = cloudUrls[Math.floor(Math.random() * cloudUrls.length)];
this.image.alt = "Kon niet geladen worden";
this.image.className = "cloud";
document.body.appendChild(this.image);
this.movePx = Math.floor((Math.random() * 2) + 1);
};
this.move = function() {
this.image.style.left = this.left + "px";
this.left -= this.movePx;
};
this.getLeft = function() {
return this.image.style.left.split("px")[0];
}
this.create();
};
function cr() {
aClouds.push(new cloud());
}
cr();
function moveClouds() {
for(i = 0; i < aClouds.length; i++) {
aClouds[i].move();
}
}
setInterval("moveClouds()", 10000);
</script>
.cloud {
position: absolute;
left: 1200px;
top: 100px;
border: 2px solid red; /* Debugging */
}
</style>
<script>
var aClouds = [];
var cloudUrls = ["cloud-1.png"];
var cloud = function() {
this.image = "";
this.moveSpeed = 100;
this.movePx = 10;
this.left = 1000;
this.create = function() {
this.image = document.createElement("img");
this.image.src = cloudUrls[Math.floor(Math.random() * cloudUrls.length)];
this.image.alt = "Kon niet geladen worden";
this.image.className = "cloud";
document.body.appendChild(this.image);
this.movePx = Math.floor((Math.random() * 2) + 1);
};
this.move = function() {
this.image.style.left = this.left + "px";
this.left -= this.movePx;
};
this.getLeft = function() {
return this.image.style.left.split("px")[0];
}
this.create();
};
function cr() {
aClouds.push(new cloud());
}
cr();
function moveClouds() {
for(i = 0; i < aClouds.length; i++) {
aClouds[i].move();
}
}
setInterval("moveClouds()", 10000);
</script>
Toevoeging op 21/05/2014 17:20:22:
Opgelost. Na een uur sleutelen heb ik het zelf op kunnen lossen. Waarschijnlijk was er ergens een oneindige loop ofzo, zo leek het.
Er zijn nog geen reacties op dit bericht.