图片预加载学习(三)：无序加载之图片切换

阅读更多

先来张效果图：

基本业务：

点击“表情”字样或“图标”时显示“表情加载中，请稍后...” 的提示信息，等所有的表情都加载完成了再显示出来。

 

接下来还是那几句：

 

这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/502
源码和技术点已经上传到附件，有需要的可以查看、下载。

 

下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）：

1、页面基本结构：

	表情
	
	

		
表情加载中，请稍后...
			
	

2、CSS样式：

 

3、JS代码：

$(function(){
	var $btn = $("#face-btn");
	var $panel = $(".panel");
	var $loading = $(".loading");
	var len = 32;//图片数量
	var emotions = [];//表情集合
	
	//添加表情集合
	for(var i=0;i0){//说明已经加载过图片了
			if($(".list").is(":visible")){//处于显示状态，那么隐藏掉
				$panel.hide();
			}else{//隐藏状态，那么显示
				$panel.show();
			}
			return false;
		}
		//还没有加载过，那么进行加载
		$panel.show();//图片正在加载的提示显示出来
		//预加载各张图片
		$.preload(emotions,{
			all:function(){//全部加载完成之后
				var html = "
";
				for(var i=0;i";
				}
				html += "
";
				$panel.append(html);//显示图片
				$loading.hide();//隐藏“图片正在加载的提示”
			}			
		});
	});
	
	//点击页面空白处时隐藏表情
	$(document).click(function(){
		if($(".list").is(":visible")){//处于显示状态，那么隐藏掉
			$panel.hide();
		}
	});
});

其中preload()是使用的第一篇中的插件，代码如下：

//图片预加载

//使用闭包模拟局部作用域
/*
(function(){
})();
*/

//传入jQuery对象，用$来接收，这样子就可以使用jQuery了
/*
(function($){
})(jQuery);
*/

(function($){
	//构造函数
	//imgs:图片数组
	//options:参数
	function PreLoad(imgs,options){
		//若传入图片数组的是字符串，手动转成数组
		this.imgs = ((typeof imgs)==="string"?[imgs]:imgs);
		
		//将传入的options参数替换掉默认的PreLoad.DEFAULTS，生成一个新的对象，并返回给this.opts
		this.opts = $.extend({},PreLoad.DEFAULTS,options);
		
		//无序方法:下划线表示这个方法只在内部使用，不提供外部调用
		this._unordered();
	}
	
	//设置默认参数
	PreLoad.DEFAULTS={
		each:null,//每一张图片加载完成后执行
		all:null//所有图片加载完成后执行
	};
	
	//在原型上添加无序加载的代码
	PreLoad.prototype._unordered=function(){
		//预加载各张图片
		var imgs = this.imgs,
			opts = this.opts,
			count = 0,
			len = imgs.length;
		$.each(imgs,function(i,src){
			if(typeof src != "string"){ return ;}//不是字符串直接返回
			
			var imgObj = new Image();
			imgObj.src = src;
			//正常加载或加载失败都执行该方法，以避免“加载失败时页面一直都显示正在加载数据”的问题
			$(imgObj).bind("load error",function(){
				opts.each && opts.each(count);
				//当图片预加载完成显示第一张图片的信息
				if(count>=len-1){
					//显示图片
					opts.all && opts.all();//若是有all就调用all()方法
				}
				count++;
			});
		});
	};
	
	//定义一个工具方法
	$.extend({
		preload:function(imgs,opts){
			new PreLoad(imgs,opts);
		}
	});
})(jQuery);

//插件学习方法：http://www.imooc.com/video/14434/0

最后，感谢老师，也祝大家好运！

• demo3_表情有序加载_材料.zip (575.2 KB)
• 下载次数: 0