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

问题描述

问 题

        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;

            }

        }

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

解决方案

某些地方请允许我简写

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;

            }

        }

这篇关于图片加载中的异步操作,如何确保顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！