jQuery中图片异步加载的简单顺序处理

if( productImgs.length > 0 )
		{
			var que = [];//生成一个新数组,用于比较异步队列中的循环个数
			for(var i = 0;i < productImgs.length;i++)
			{
				var img = new Image();
				img.onload = function()
				{

					que.push({src:this.src,title:this.title});//将图片预加载并将其属性存于数组中
					if(que.length == productImgs.length)//异步队列加载完成执行图片的显示和滑动部分实例化操作
					{
						for(var j = 0; j < que.length;j++)
						{
							$slides.append('<div class="col-xs-12"><img class="col-xs-12" src="'+que[j].src+'" title="'+que[j].title+' " /></div>');
						}
						//图片滑动部分实例化
						$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);
						});
					}
				}
				img.src = productImgs[i].thumb;
				img.title = productImgs[i].title
				img.i =i;

			}

		}

 

转载于:https://my.oschina.net/leolee2356/blog/675804