先来张效果图：
基本业务：
点击“表情”字样或“图标”时显示“表情加载中，请稍后...” 的提示信息，等所有的表情都加载完成了再显示出来。
接下来还是那几句：
这个特效是跟着慕课网上的视频学的，视频链接如下：https://www.imooc.com/learn/502
源码和技术点已经上传到附件，有需要的可以查看、下载。
下面直接上代码（PS：代码中的注释是根据个人理解添加的，并不是老师原有的注释）：
1、页面基本结构：
<div class="box"> <a href="javascript:void(0);" id="face-btn">表情</a> <div class="panel"> <p class="loading">表情加载中，请稍后...</p> <!-- <ul class="list"> <li><img src="emotion/ldw/w_0001.gif"/></li> <li><img src="emotion/ldw/w_0002.gif"/></li> </ul> --> </div> </div>
2、CSS样式：
<style>
body,p,ul,li{
margin: 0;
padding: 0;
}
body{background-color: #eee;}
a{text-decoration: none;outline:none;}
.box{margin:150px 0 0 200px;}
#face-btn{
display:block;
background: url(qq-icon.png) no-repeat 0 0px;
width:225px;
height:225px;
background-size:12% 12%;
text-indent:28px;
color:#333;
line-height:25px;
font-size:23px;
}
.panel{
width:460px;
padding:2px;
border:1px solid #ccc;
background-color:#fff;
position:relative;
top:-190px;
display:none;
}
.loading{
text-align:center;
}
.list li{
display:inline-block;
width:50px;
height:50px;
border:1px solid #fff;
margin-right:5px;
margin-bottom:5px;
cursor:pointer;
}
.list li:hover{
border-color:#06c;
}
</style>
3、JS代码：
$(function(){
var $btn = $("#face-btn");
var $panel = $(".panel");
var $loading = $(".loading");
var len = 32;//图片数量
var emotions = [];//表情集合
//添加表情集合
for(var i=0;i<len;i++){
if(i<9){
emotions[i]="emotion/ldw/w_000"+(i+1)+".gif";
}else{
emotions[i]="emotion/ldw/w_00"+(i+1)+".gif";
}
}
//点击“表情”时，显示表情加载的区域
$btn.click(function(ev){
ev.stopPropagation();//阻止冒泡
if($(".list").length>0){//说明已经加载过图片了
if($(".list").is(":visible")){//处于显示状态，那么隐藏掉
$panel.hide();
}else{//隐藏状态，那么显示
$panel.show();
}
return false;
}
//还没有加载过，那么进行加载
$panel.show();//图片正在加载的提示显示出来
//预加载各张图片
$.preload(emotions,{
all:function(){//全部加载完成之后
var html = "<ul class=\"list\">";
for(var i=0;i<len;i++){
html+="<li><img src=\""+emotions[i]+"\"/></li>";
}
html += "</ul>";
$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
最后，感谢老师，也祝大家好运！