js newImage load后产生的问题

Question

使用了如下形式imgArr.push({'index':this.index,'width':this.width,'height':this.height,'ratio':this.width/this.height});定义了数组，在调用的时候console imgArr显示正常，console imgArr[0]却显示Undefined;
这种问题如何解决?

自己又调试了下，确认了onload里生成的imgArr和调用的时候的先后顺序是调用的imgArr先console出来，然后才是onload里给imgArr赋值。
那么问题来了，如何让我顺利调用onload赋值后的imgArr???

以下为代码

(function (window) {

    // 由于是第三方库，我们使用严格模式，尽可能发现潜在问题
    'use strict';



    function IfeAlbum() {

        // 布局的枚举类型
        this.LAYOUT = {
            PUZZLE: 1,    // 拼图布局
            WATERFALL: 2, // 瀑布布局
            BARREL: 3     // 木桶布局
        };

        // 公有变量可以写在这里
        // this.xxx = ...
        //默认参数
        this._layout=2; //默认布局方式为瀑布流布局；
        this._fullScreen=true;  //默认允许点击后全屏显示图片


        this._Barrel={
            min:3,
            max:6,
            minHeight:300,
            maxHeight:600
        }

       


    }

    var album=document.getElementById('photo-album'),
        browerH=document.documentElement.clientHeight || document.body.clientHeight,
        browerW=document.documentElement.clientWidth || document.body.clientWidth;


    var imgArr=[];

    /**
     * 初始化并设置相册
     * 当相册原本包含图片时，该方法会替换原有图片
     * @param {(string|string[])} image  一张图片的 URL 或多张图片 URL 组成的数组
     * @param {object}            option 配置项
     */
    IfeAlbum.prototype.setImage = function (image, option) {
        
        if (typeof image === 'string') {
            // 包装成数组处理
            this.setImage([image]);
            return;
        }
        album.innerHTML="";
        this.addImage(image);    


    };
    /**
     * 获取相册所有图像对应的 DOM 元素
     * 可以不是 ，而是更外层的元素
     * @return {HTMLElement[]} 相册所有图像对应的 DOM 元素组成的数组
     */
    IfeAlbum.prototype.getImageDomElements = function() {
        return album.querySelectorAll(".photo-thumbnail");
    };
    /**
     * 向相册添加图片
     * 在拼图布局下，根据图片数量重新计算布局方式；其他布局下向尾部追加图片
     * @param {(string|string[])} image 一张图片的 URL 或多张图片 URL 组成的数组
     */
    IfeAlbum.prototype.addImage = function (image) {
         var count=image.length;
        for (var i = image.length - 1; i >= 0; i--) {
            //图片地址
            var img=new Image();
            img.index=i;
            img.onload=function(){
                imgArr.push({'index':this.index,'width':this.width,'height':this.height,'ratio':this.width/this.height});
                imgArr.sort(function(a,b){
                    return a.index-b.index;
                });

            }
            
            img.src=image[i];
            //用新div包裹
            var photoDiv=document.createElement('div');
            photoDiv.className='photo-thumbnail';
            photoDiv.appendChild(img);
            //将其添加到容器内
            album.appendChild(photoDiv);

        }
        

        var layout=this.getLayout();
        switch(layout){
            case 1:
                this.puzzle();
                break;
            case 2:
                this.waterfall();
                break;
            case 3:
                this.barrel();
                break;
        }

    };

    /**
     * 设置相册的布局
     * @param {number} layout 布局值，IfeAlbum.LAYOUT 中的值
     */
    IfeAlbum.prototype.setLayout = function (layout) {
        if(typeof layout=="number" && (layout==1 || layout==2 || layout==3)){
             this._layout=layout;
             return false;
        }
        if(typeof layout=="string" && this.LAYOUT[layout]){
            this._layout=this.LAYOUT[layout];
            return false;
        }
         console.error("setLayout布局设置参数有误，请检查后重新设置");
    };



    /**
     * 获取相册的布局
     * @return {number} 布局枚举类型的值
     */
    IfeAlbum.prototype.getLayout = function() {
        console.log(this._layout);
        return this._layout;
    };

    /**
     * 设置木桶模式每行图片数的上下限
     * @param {number} min 最少图片数（含）
     * @param {number} max 最多图片数（含）
     */
    IfeAlbum.prototype.setBarrelBin = function (min, max) {

        // 注意异常情况的处理，做一个健壮的库
        if (min === undefined || max === undefined || min > max) {
            console.error('setBarrelBin的最少最多含图片数参数设置错误，请检查后重新输入');
            return;
        }

        this._Barrel.min=min;
        this._Barrel.max=max;

    };



    /**
     * 获取木桶模式每行图片数的上限
     * @return {number} 最多图片数（含）
     */
    IfeAlbum.prototype.getBarrelBinMax = function () {
        return this._Barrel.max;
    };



    /**
     * 获取木桶模式每行图片数的下限
     * @return {number} 最少图片数（含）
     */
    IfeAlbum.prototype.getBarrelBinMin = function () {
        return this._Barrel.min
    };



    /**
     * 设置木桶模式每行高度的上下限，单位像素
     * @param {number} min 最小高度
     * @param {number} max 最大高度
     */
    IfeAlbum.prototype.setBarrelHeight = function (min, max) {
        if(min === undefined || max === undefined || min > max){
            console.error('setBarrelHeight的最小最大高度参数设置错误，请检查后重新输入');
            return;
        }
        this._Barrel.minHeight=min;
        this._Barrel.maxHeight=max;
    };



    /**
     * 获取木桶模式每行高度的上限
     * @return {number} 最大高度
     */
    IfeAlbum.prototype.getBarrelHeightMax = function () {
        return this._Barrel.maxHeight;
    };



    /**
     * 获取木桶模式每行高度的下限
     * @return {number} 最小高度
     */
    IfeAlbum.prototype.getBarrelHeightMin = function () {
        return this._Barrel.minHeight;
    };


    IfeAlbum.prototype.barrel=function(){
        var photoDiv=this.getImageDomElements(),
            minHeight=this.getBarrelHeightMin(),
            maxHeight=this.getBarrelHeightMax(),
            min=this.getBarrelBinMin(),
            max=this.getBarrelBinMax(),
            photoArr=imgArr;

        var i=photoDiv.length-1;
        

        var imgRowArr=[];

       console.log(imgArr,imgArr[0]);
        //此处显示为Undefined

        for (i;i >= 0; i--) {
            var imgNow=photoArr[i];
           
            var imgH=imgNow.height,
                imgW=imgNow.width,
                imgRatio=imgNow.ratio;
            var browerW=browerW,browerH=browerH;

            var rowH,rowW;

            rowW+=imgW;
            if(imgNum==0){

                imgNum++;
                if(imgH< minHeight) rowH=minHeight;
                if(imgH>maxHeight) rowH=maxHeight;
                imgW=rowH * imgRatio;
                imgRowArr.push(imgNow);
            
            }else if((rowW<browerW && imgNum<max)|| imgNum<min){
               imgNum++;
               imgH=rowH;
               imgW=rowH*imgRatio;
               imgRowArr.push(imgNow);
            
            }else{
                imgH=rowH;
                imgW=rowH*imgRatio;
                imgRowArr.push(imgNow);

                 var ratioRow=rowW/browerW;
                    rowH=rowH/ratioRow;

                for (var j = 0; j < imgRowArr.length; j++) {
                    imgRowArr[i].height=rowH;
                    imgRowArr[i].width=rowH * imgRowArr[i].ratio;
                }

                imgNum=0;
                imgRowArr=[];
                rowH=0;
                rowW=0;

            }   
        }
    }
    // 实例化
    if (typeof window.ifeAlbum === 'undefined') {
        // 只有当未初始化时才实例化
        window.ifeAlbum = new IfeAlbum();
    }

}(window));


window.onload=function(){
    ifeAlbum.setLayout(3);
    ifeAlbum.setImage(["http://placehold.it/350x150","http://placehold.it/350x500","http://placehold.it/550x200","http://placehold.it/350x150"]);
}

Answer 1

加载图像是异步的，可以用回调(或者ES6 Promise,ES7 await/async)。
代码太多了，不看了哈哈~~
具体业务逻辑自己琢磨哈。

function loadImage(src, callback) {
  var img = new Iamge();
  img.onload = function () {
    typeof callback === 'function' && callback(null, img);
  }
  img.onerror = function () {
    typeof callback === 'function' && callback(new Error('load image error!'));
  }  
  img.src = src;
}

function test() {
  loadImage('http://xxx.jpg', function (err, img) {
    if (err) {
      console.log(err);
      return;  
    }
    console.log(img);
  });
}

test();