关于循环：Javascript Canvas图像并不总是加载

Javascript Canvas images don't always load

本问题已经有最佳答案，请猛点这里访问。

有时我的图像在我第一次访问页面时加载，有时我必须刷新它们才能加载。有时也会加载一个图像而不加载另一个图像。

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

//Store everything in arrays
var dimgs = ["hair-1","head-1"]; //Name of classes for imgs
var cans = ["hairimg","headimg"]; //Canvas element names
var dcans = ["chairimg","cheadimg"]; //Canvas names
var dctxs = ["ctxa","ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
if(p != null) {
getcan(p);
}
}

//Function to create Canvas and draw image
function getcan(p) {
defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
var x;
if(p != null) {
defimgs[p].onload = (function(x){
dcans[x] = document.getElementById(cans[x]);
dctxs[x] = dcans[x].getContext('2d');
dcans[x].width = defimgs[x].naturalWidth;
dcans[x].height = defimgs[x].naturalHeight;
dctxs[x].drawImage(defimgs[x], 0, 0);
}(p));
}
}

我也尝试了以下相同的结果：

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

//Store everything in arrays
var dimgs = ["hair-1","head-1"]; //Name of classes for imgs
var cans = ["hairimg","headimg"]; //Canvas element names
var dcans = ["chairimg","cheadimg"]; //Canvas names
var dctxs = ["ctxa","ctxb"]; //Context names
var defimgs = []; //Images found

//Loop to create Canvas and draw image
for (var p = 0; p < 2; p++) {
if(p != null) {
defimgs[p] = document.getElementsByClassName(dimgs[p])[0].getElementsByTagName('img')[0];
dcans[p] = document.getElementById(cans[p]);
dctxs[p] = dcans[p].getContext('2d');
dcans[p].width = defimgs[p].naturalWidth;
dcans[p].height = defimgs[p].naturalHeight;
getcan(p);
}
}

//Function to draw image
function getcan(p) {
var x;
if(p != null) {
defimgs[p].onload = (function(x){
dctxs[x].drawImage(defimgs[x], 0, 0);
}(p));
}
}

HTML：

1
2
3
4
5
6
7
8
9
10

我只是不知道使用div类将div标记中的每个图像加载到canvas上的正确方法。