Javascript 无法使用循环在画布中加载多个图像

我试图在一个循环中加载多个图像，但不知道为什么它不起作用

    LoadCharactersImages2:function(Layer,roomObject)
    {
        var imgs = Array(5);
        var ImgBanners = Array(5);
        var sources = Array(5);
        var locationX = 100;            //x coordinate location of image
        var self = this;
            self.ImgloadCount = 0;



        sources[0] = "images/pacman/pacman_right.png";
        sources[1] = "images/pacman/pinkdown.png";
        sources[2] = "images/pacman/redleft.png";
        sources[3] = "images/pacman/yellowup.png";
        sources[4] = "images/pacman/blueright.png";

        for(var i = 0 ; i < 5;i++)
        {
            imgs[i] = new Image();
            imgs[i].src = sources[i];

            imgs[i].onload = function() {
                 ImgBanners[i] = new Kinetic.Image({
                  x: locationX,
                  y: 100,
                  image: imgs[i],
                });

                Layer.add(ImgBanners[i]);
                self.ImgloadCount++;
                self.AddtoStage(Layer,self);
                self.LoadUsersImages(self,roomObject,Layer);
            }

            locationX = locationX + 100;                
        }


    },

    AddtoStage:function(layer,self)
    {
        if(self.ImgloadCount == 5)
            self.stage.add(layer);
    },

您需要关闭：

       imgs[i].onload = (function(index){
             return function() {
                 ImgBanners[index] = new Kinetic.Image({
                  x: locationX,
                  y: 100,
                  image: imgs[index],
                });
             })(i);

另见：

---

请查看该链接。在coffeescript循环中加载图像

---

我通过从语句中删除返回函数解决了这个问题。
嘿，检查一下，我已经编辑了这个问题。代码与以前一样工作。结果相同。我认为这不会有任何区别。

       imgs[i].onload = (function(index){
             return function() {
                 ImgBanners[index] = new Kinetic.Image({
                  x: locationX,
                  y: 100,
                  image: imgs[index],
                });
             })(i);