turn.js异步加载实现翻书效果

/** * 电子翻书 *///var width = 1080;//var height = 1680; var width = "10rem";var height = "15.2rem"; window.onload = function () {  //预加载 //loading(18,1); initData();} function getQueryString(name) { var result = window.location.search.match(new RegExp("[/?/&]" + name + "=([^/&]+)", "i")); if (result == null || result.length < 1) {  return ""; } return result[1];} function initData(){ var book = getQueryString("bookId"); var count = getQueryString("pageCount"); loading_img_url = new Array(); for (var i = 0; i < count; i++) { loading_img_url.push((i+1) + ".png"); } var page = getQueryString("pageNum"); if(!page){ page =1; } loading(book,count,page);} var date_start;var date_end;date_start = getNowFormatDate();//加载图片var loading_img_url = []; //加载页面function loading(book,count,page) { var numbers = 0; var length = loading_img_url.length; //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/"; var resUrl = website + "/lawcase/bookScreenshot?bookId=" + book + "&page="; var jsUrl = ctxStatic+"/modules/front/guide/vertical/"; var bookId = book;  var img = new Image();  img.src = resUrl + page;  //img.src = resUrl + pageNum + ".png";  img.onerror = function () {   numbers += (1 / length) * 100;  }  img.onload = function () {   numbers += (1 / length) * 100;   $('.number').html(parseInt(numbers) + "%");   console.log(numbers);   if (Math.round(numbers)) {    //$('.number').hide();    date_end = getNowFormatDate();    var loading_time = date_end - date_start;    //预加载图片    $(function progressbar() {     //拼接图片     $('.shade').hide();     var tagHtml = "";     var imgUrl = resUrl + page;     //var imgUrl = resUrl + (pageNum) + ".png";     if (pageNum == 1) {      tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>";     } else if (pageNum == length) {      tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>";     } else {      tagHtml += "<div><img src='"+imgUrl+"' /></div>";     }     $(".flipbook").append(tagHtml);     var w = $(".graph").width();     $(".flipbook-viewport").show();    });      //配置turn.js    function loadApp() {     var w = width;     var h = height;     $('.flipboox').width(w).height(h);     $('.flipbook').turn({      width: w,      height: h,      elevation: 50,      pages: count,      display: 'single',      gradients: true,      autoCenter: true,      when: {       turning: function (e, page, view) {        var total = $(".flipbook").turn("pages");//总页数        $("#currentPage").html(page);        $("#pageCount").html("/"+total);        if (page == 1) {         $(".btnImg").css("display", "none");         $(".mark").css("display", "block");        } else {         $(".btnImg").css("display", "block");         $(".mark").css("display", "none");        }        if (page == length) {         $(".nextPage").css("display", "none");        } else {         $(".nextPage").css("display", "block");        }       },       turned: function (e, page, view) {        var total = $(".flipbook").turn("pages");//总页数        $("#currentPage").html(page);        $("#pageCount").html("/"+total);        // 判断翻页按钮点击事件以及状态样式        if(page >= total){         $("#next").addClass("btn-invalid").removeAttr('onclick');        }else{         $("#next").removeClass("btn-invalid").attr("onclick","next();");        }        if(page == 1){         $("#prev").addClass("btn-invalid").removeAttr('onclick');         $("#indexPage").css("display","none");        }else{         $("#prev").removeClass("btn-invalid").attr("onclick","prev();");         $("#indexPage").css("display","flex");        }       },       missing: function (e, pages) {        for (var i = 0; i < pages.length; i++) {         addPage(pages[i], $(this),bookId);        }       }        }     })  var cpage = getQueryString("pageNum");  $(".flipbook").turn('page', cpage);    }    yepnope({     test: Modernizr.csstransforms,     yep: [jsUrl+'js/turn.js'],     complete: loadApp    });   }  }} function getNowFormatDate() { var date = new Date(); var seperator1 = ""; var seperator2 = ""; var month = date.getMonth() + 1; var strDate = date.getDate(); if (month >= 1 && month <= 9) {  month = "0" + month; } if (strDate >= 0 && strDate <= 9) {  strDate = "0" + strDate; } var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate  + "" + date.getHours() + seperator2 + date.getMinutes()  + seperator2 + date.getSeconds(); return currentdate;} //异步加载function addPage(page, book,bookId) { //var resUrl = ctxStatic+"/modules/intelligentquery/img/3/"; var resUrl = website + "/lawcase/bookScreenshot?bookId=" + bookId + "&page="; var imgUrl = resUrl + (page); var tagHtml = ""; if (page == 1) {  tagHtml += "<div id='first'><img src='"+imgUrl+"' /></div>"; } else if (page == length) {  tagHtml += "<div id='end'><img src='"+imgUrl+"' /></div>"; } else {  tagHtml += "<div><img src='"+imgUrl+"' /></div>"; }  // Check if the page is not in the book if (!book.turn('hasPage', page)) {  // Create an element for this page  var element = $('<div />').html('');  // Add the page  book.turn('addPage', element, page);  element.html(tagHtml); }}

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/><c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/><c:set var="website" value="${pageContext.request.contextPath}"/><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="apple-mobile-web-app-capable" content="yes"/> <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <title>阅读</title> <script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script> <script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="${ctxStatic}/modules/front/guide/vertical/common/js/common.js"></script> <script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/modernizr.2.5.3.min.js"></script>  <script type="text/javascript" src="${ctxStatic}/modules/front/guide/vertical/js/main.js"></script> <script src="${ctxStatic}/modules/front/guide/vertical/common/js/flexible.js"></script>   <link href="${ctxStatic}/modules/front/guide/vertical/css/app-base.css" rel="external nofollow" rel="stylesheet"> <style type="text/css"> .flipbook img{ width:10rem; height:15.2rem; } .book-wrapper{ background-image: url('');  } </style> </head><body> <div class="flex-container">  <header class="banner2">   <h1>阅读</h1>  </header>  <div class="page-content judicial-wrapper book-wrapper">   <!-- 书本区域 -->   <div class="flipbook-viewport book-box boox-details" style="display:none;">    <div class="previousPage"></div>    <div class="nextPage"></div>    <div class="return"></div>    <div class="container">     <div class="flipbook">     </div>    </div>   </div>  </div>  <!-- 悬浮菜单 -->  <nav class="menu-right">   <div class="paging-box">    <ul>     <li>      <a href="javascript:;" id="goBack" class="i-orange"> <i class="icon-undo2"></i></a>     </li>     <li>      <a href="javascript:;" id="prev" class="prev-page" οnclick="prev()"> <i class="icon-arrow-up2"></i></a>     </li>     <li class="paging-item">      <p id="pageNum"><span id="currentPage">0</span><span id="pageCount">/0</span></p>     </li>     <li>      <a href="javascript:;" id="next" class="next-page" οnclick="next()"> <i class="icon-arrow-down2"></i></a>     </li>     <li>      <div class="skip-page">       <span>跳至</span>       <input id="skip-page-num" type="text" name="skip-toPage">       <div id="softkey"></div>       <span>页</span>      </div>     </li>     <li>      <a href="${front}/guide/vertical/index" class="color-home"> <i class="icon-homepage_fill"></i></a>     </li>    </ul>   </div>  </nav> </div></body></html> <script>  var ctxStatic = "${ctxStatic}"; var website = "${website}";  //上一页 function prev(){  var currentPage = $(".flipbook").turn("page");  $(".flipbook").turn('page', currentPage - 1); } // 下一页 function next() {  var currentPage = $(".flipbook").turn("page");  $(".flipbook").turn('page', currentPage + 1); }  var temp_couter = 0; // 模拟数字键盘 var softkey = document.getElementById("softkey"); var input1 = document.getElementById("skip-page-num"); $('#skip-page-num').focus(function(){  new KeyBoard(input1,softkey); });  //跳页 function _global_keyboard_close_btn_callback(value){  var pageNum = parseInt(value);  var total = parseInt(getQueryString("pageCount"));  if(pageNum <= 1){   pageNum = 1;  }else if(pageNum >= total){   pageNum = total;  }   $("#skip-page-num").val(pageNum);  $(".flipbook").turn('page', pageNum); } </script><script src="${ctxStatic}/modules/front/guide/vertical/common/virtualkeyboard/keyboard.js"></script>