图片加载中的异步操作,如何确保顺序

Question

        if( productImgs.length > 0 )
        {
            for(var i = 0;i < productImgs.length;i++)
            {
                var img = new Image();
                img.onload = function()
                {
                    $slides.append('<div class="col-xs-12"><img class="col-xs-12" src="'+this.src+'" title="'+this.title+' " /></div>');
                    console.log(productImgs.length+''+this.i);
                    if(this.i == productImgs.length-1)
                    {

                        i = null;
                        //图片滑动部分实例化
                        $slides.slidesjs({
                            width: $slides.find("img").width(),
                            height: $slides.find("img").height(),
                            navigation: false
                        });
                        $('.slidesjs-pagination-item').each(function(i, e) {
                            $(e).find('a').html('<span class="pagination-larger">'+(i+1)+'</span>'+ '/'+ productLength);
                        });
                        console.log(132);
                    }
                }
                img.src = productImgs[i].thumb;
                img.title = productImgs[i].title
                img.i =i;

            }

        }

此问题的最终目的是让所有图片都加载完成后进行图片滑动部分实例化,然后目前并不能实现,不知道,这种涉及到图片加载顺序的异步操作该如何实现呢?

Answer 1

某些地方请允许我简写

if( productImgs.length > 0 )
        {
            for(var i = 0;i < productImgs.length;i++)
            {
                var img = new Image();
                $slides.append('<div class="col-xs-12"></div>');
                function disp(i){
                    return function (){
                        $slides.find('div')[i].append(this);
                    }             
                }
                img.onload = disp(i);
                img.src = productImgs[i].thumb;
                img.title = productImgs[i].title
                img.i =i;

            }

        }

Answer 2

因为是异步加载，所以有可能加载顺序并不是你所预期的。如果要按照预期的顺序加载，可以改为同步加载。或者增加一个延时代码，在每次加载之后sleep一段时间，确保一张图片加载完再加载下一张。