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部分

//获取浏览器内容区高度
var clientH = window.innerHeight;
//定义数组接收截取的图片数据
var picData = [];
//起始位置
var s=0;
//结束位置
var e=6;     

/**
* 创建图片DOM
 */
function buildBookletHtml(picList){
    var html = ''
    $.each(picList,function(index,item){
        html +=    '<div class="pageContent" style="cursor:pointer">';
        html +=        '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'+item.path+'"/>';
        html +=    '</div>';
    });
    $('#bookletContent').html(html);
}

/**
*初始化booklet
*/
function initBooklet(){
    $('#bookletContent').booklet({
        width:clientH*1.4,
        height:clientH,
        speed:600,
        arrows:true,
        manual:false,
        pageNumbers:false
    });
}

/**
* 初始化图片数据，默认只加载6张
*/
function initPicData(picList){
    picData = picList.slice(s,e);
    buildBookletHtml(picData)
    initBooklet();
}

/**
* booklet翻页事件
* 每翻一次，就增加俩页
*/
function bookletEvents(picList){
    if(e<picList.length){
        //翻书时
        $('#bookletContent').bind('bookletchange',function(){
            picData = picList.slice(e,e+2);
            e=e+2;
            $.each(picData,function(index,item){
                var html  =    '<div class="pageContent" style="cursor:pointer">';
                html     +=        '<img class="imgAuto" data-toggle="modal" data-target="#bookletModal" src="'item.path+'"/>';
                html     +=    '</div>';
                $('#bookletContent').booklet('add','end',html);
            });
        });
    }
 64 }

/**
*点击图片显示相应的遮罩层原图
*这里用的事件委托，原因是每次翻页都会新增DOM。如果直接给img绑定点击事件，新添加的不会触发事件
*/        
function showBookletBind(){
    $('#bookletContent').on('click',function(ev){
        var ev = ev || window.event;
        var target = ev.target || ev.srcElement;
        if(target.className === 'imgAuto'){
            $('.showBooklet').empty();
            $('.showBooklet').html(target.outerHTML);
            $('.showBooklet').css({'width':'auto','padding':'20px 30px'});
        }
    });
}

/**
*获取数据
*/
function getPicData(){
    var url = '';
    $.post(url,{id:id},function(data){
          var picList = data.picList;
          initPicData(picList);
          bookletEvents(picList);
    });    
}

/**
*初始化页面
*/
function init(){
    getPicData();
    showBookletBind();
}

init();

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