异步加载数据——turn.js

var tostore = GetQueryString("tostore");
var photo_id = GetQueryString("photo_id");
var photo_name = decodeURI(decodeURI(GetQueryString("photo_name")));
var picArr = [];
var loadType = 2;
var total = 0;

$(function () {

    ToolBar.pagesize = 20;
    ToolBar.callback = picture.load;
    ToolBar.show = false;
    picture.loadData();

    $("#albumName").html("《" + photo_name.replace(/(^\s*)|(\s*$)/g, "") + "》");

    $('.scaleBtn').viewer({
        url: 'data-original'
    });

    $("#goStore, .head").click(function () {
        goUrl('/index.aspx');
    });
});

var picture = {
    load: function () {
        ToolBar.isLoading = true;
        var data = {
            act: "GetEphotoDetailsList",
            photo_id: photo_id,
            page: ToolBar.currentPage,
            pagesize: ToolBar.pagesize
        };
        var successFun = function (json) {
            ToolBar.isLoading = false;
            total = json.Info.length;
            ToolBar.build(total);

            if (ToolBar.currentPage == 1) {
                if (total > 0) {
                    picture.getArr(json.Info);
                    picture.initTurn();
                    $(".albumCount").html(1 + "/" + total);
                    ToolBar.currentPage++;
                } else {
                    $(".flipbook").html('<img class="emptyTip" src="/images/empty.png" />');
                    $(".btnLst").addClass("hideBtnLst");
                    $(".albumCount").html("店铺没有上传图册~");
                }
            } else {
                picture.addTo(json.Info);
            }
        };
        JsAjax("/Handle/nc_store_ephotoHandle.ashx", data, successFun);
    },

    loadData: function () {
        ToolBar.currentPage = 1;
        picture.load();
    },

    getArr: function (data) {
        var html = "";
        $(data).each(function (index, item) {
            html += '<div><img class="imgCover" src="' + item.ephoto_url + '" /></div>';
        });
        $(".flipbook").append(html);
    },

    addTo: function (data) {
        var imgArr = [];
        $(data).each(function (index, item) {
            imgArr.push(item.ephoto_url);
        });
        for (var i = 0; i < imgArr.length; i++) {
            var element = $('<div><img class="imgCover" src="' + imgArr[i] + '" /></div>');
            var page = $(".flipbook").turn("pages");
            $(".flipbook").turn("addPage", element);
        }
    },

    initTurn: function () {
        var w = 7.18 + 'rem';
        var h = 5.71 + 'rem';
        $('.flipbook').turn({
            width: w,
            height: h,
            acceleration: true,
            elevation: 50,
            display: 'single',
            duration: 500,
            gradients: true,
            autoCenter: true,
            when: {
                turned: function (e, page, view) {
                    picture.zoomIn(page);
                    $(".albumCount").html(page + "/" + total);

                    if (page == 1 || page == total) {
                        $(this).turn('peel', 'br');
                    }

                    if (page % ToolBar.pagesize == 0) {
                        ToolBar.next();
                    }
                }
            }
        })
    },

    zoomIn: function (page) {
        var bg = $(".p" + page).find("img").attr("src");
        $(".scaleBtn img").attr("src", bg);
    }
}