带有 onclick 事件的动态图像变量答案

【问题标题】：dynamic image variable with onclick event带有 onclick 事件的动态图像变量
【发布时间】：2016-10-04 16:09:39
【问题描述】：

我有几幅画布。我也有几个图片网址。我想在画布上绘制所有图片。绘图功能有问题。仅当图像完全加载时才能绘制图像，但我必须在图像加载时绘制图像。我写了以下代码：

for (var i = 2; i < length; i++) {
    canvid[i] = "canv" + i;
    img[i] = new Image();

    img[i].src = "..\\images\\UploadImage\\"+ name + i + ".jpg";

    img[i].onload = function () { 
        var c = document.getElementById(canvId[i]);
        var cDraw = c.getContext("2d");
        cDraw.drawImage(img[i], 0, 0);
    };

我知道这段代码有错误，它是一种显示我想要的伪代码。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

把你的逻辑放进去

$(documet).ready(function(){

   //logic
});

【讨论】：

【解决方案2】：

答案在以下链接

stack overflow link

当你想在图像变量上调用点击事件时，你必须等待它所以你不能使用循环，你必须在加载事件上对上一个图像进行下一个调用。

 var loadImages = function (imageURLarray) {
                if (!(startPage < pages))
                    return;
                canvid = "canv" + i;
                img.src = imageURLarray[startPage];
                // your top code
                img.onload = function (e) {
                    // code, run after image load
                    var c = document.getElementById(canvid);
                    var cDraw = c.getContext("2d");
                    cDraw.drawImage(img, 0, 0);
                    startPage++;
                    loadImages(imageURLarray);
                }
            }

            loadImages(imageURLarray);

【讨论】：