booklet翻书插件使用——异步加载数据

最近写一个pdf阅读页，但是返回的数据里既有pdf文件，也有图片集，就索性写两种浏览模式，用booklet的原因是相对于turn.js方法事件比较清晰，效果吧在这里也够用。

方法、事件、参数这里就不一一介绍了，官网里描述的很清晰。booklet官网

下面是效果图：

整体思路：

1、因为是一整本书，图片数量都是几千张，一次加载导致页面直接崩溃，所以初始化booklet的时候只截取图片的前几张，提高页面响应速度

2、然后在执行页面翻页（change）事件的时候给他添加页数，翻一次添加两页。当页数大于等于图片数量时，停止添加。

html部分

<div class="bookContainer">
<!--给一个书厚度的背景图-->
<div class="bookletBackground">
<!--里面放图片DOM，初始化booklet-->
<div id="bookletContent"></div>
</div>
<!--书本相对来说比较小，添加一个遮罩层，显示每页图片的原图，也就是放大效果-->
<div class="modal fade" id="bookletModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog showBooklet"></div>
</div>
</div>

js部分

1 //获取浏览器内容区高度
2 var clientH = window.innerHeight;
3 //定义数组接收截取的图片数据
4 var picData = [];
5 //起始位置
6 var s=0;
7 //结束位置
8 var e=6;
9
10 /**
11 * 创建图片DOM
12  */
13 function buildBookletHtml(picList){
14     var html = ''
15     $.each(picList,function(index,item){
16         html +=    '<div class="pageContent" style="cursor:pointer">';
17         html +=        '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'+item.path+'"/>';
18         html +=    '</div>';
19     });
20     $('#bookletContent').html(html);
21 }
22
23 /**
24 *初始化booklet
25 */
26 function initBooklet(){
27     $('#bookletContent').booklet({
28         width:clientH*1.4,
29         height:clientH,
30         speed:600,
31         arrows:true,
32         manual:false,
33         pageNumbers:false
34     });
35 }
36
37 /**
38 * 初始化图片数据，默认只加载6张
39 */
40 function initPicData(picList){
41     picData = picList.slice(s,e);
42     buildBookletHtml(picData)
43     initBooklet();
44 }
45
46 /**
47 * booklet翻页事件
48 * 每翻一次，就增加俩页
49 */
50 function bookletEvents(picList){
51     if(e<picList.length){
52         //翻书时
53         $('#bookletContent').bind('bookletchange',function(){
54             picData = picList.slice(e,e+2);
55             e=e+2;
56             $.each(picData,function(index,item){
57                 var html  =    '<div class="pageContent" style="cursor:pointer">';
58                 html     +=        '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'item.path+'"/>';
59                 html     +=    '</div>';
60                 $('#bookletContent').booklet('add','end',html);
61             });
62         });
63     }
64 }
65
66 /**
67 *点击图片显示相应的遮罩层原图
68 *这里用的事件委托，原因是每次翻页都会新增DOM。如果直接给img绑定点击事件，新添加的不会触发事件
69 */
70 function showBookletBind(){
71     $('#bookletContent').on('click',function(ev){
72         var ev = ev || window.event;
73         var target = ev.target || ev.srcElement;
74         if(target.className === 'imgAuto'){
75             $('.showBooklet').empty();
76             $('.showBooklet').html(target.outerHTML);
77             $('.showBooklet').css({'width':'auto','padding':'20px 30px'});
78         }
79     });
80 }
81
82 /**
83 *获取数据
84 */
85 function getPicData(){
86     var url = '';
87     $.post(url,{id:id},function(data){
88           var picList = data.picList;
89           initPicData(picList);
90           bookletEvents(picList);
91     });
92 }
93
94 /**
95 *初始化页面
96 */
97 function init(){
98     getPicData();
99     showBookletBind();
100 }
101
102 init();

以上呢就是booklet的使用过程，也算记录一下吧。