如何增加turn.js的DOM中的页面数量答案

【问题标题】：How to increase the amount of pages in DOM of turn.js如何增加turn.js的DOM中的页面数量
【发布时间】：2016-01-14 19:57:00
【问题描述】：

Turn.js 可以处理很长的翻书。也就是说，没有限制关于它可以包含的页面数量。这是因为 turn.js 只在 DOM 中保留最后 6 个页面，无论多长时间书是。仍然会有对之前内容的引用以前加载过，但可以减少缓存以释放内存。

我想在 DOM 中保留前 7 个页面。怎么能做到这一点？ pagesInDOM 的限制是 turn.js 中定义的 6。

html

<div id=”flipbook”>
<div class=”hard”>Page 1</div>
<div class=”hard”>Page 2</div>
<div class=”hard”>Page 3</div>
<div class=”hard”>Page 4</div>
<div class=”hard”>Page 5</div>
<div class=”hard”>Page 6</div>
<div class=”hard”>Page 7</div>
<div class=”hard”>Page 8</div>
<div class=”hard”>Page 9</div>
<div class=”hard”>Page 10</div>
</div>

 var oTurn = $('#flipbook').turn({
        width: 1700,
        height: 850,
        elevation: 50,
        gradients: false,
        autoCenter: true,
        acceleration: true,
        start: function (event, pageObject, corner) {
            if (pageObject.next === 1)
                event.preventDefault();
        },
        turning: function (event, page, view) {
            if (page === 1)
                event.preventDefault();
        }
    });

【问题讨论】：

在 Stack Overflow，我们希望您自己尝试一下 - 使用谷歌搜索或编写一些代码（甚至只是伪代码）。您能告诉我们您首先尝试了什么 - 这样我们就不会重复您的努力（并向我们展示您已经付出了一些努力）？

标签： javascript jquery turnjs

【解决方案1】：

如果你想动态设置pagesInDOM，你可以传入构造函数。（我不知道为什么这在库中被硬编码）

const pagesInDOMDynamic = 8;
        $('#flipbook').turn({
            width: '300px',
            height: '300px',
            pagesInDOM: (pagesInDOMDynamic < 6) ? 6 : pagesInDOMDynamic  // pass the value to the constructor, If value is less than 6 pass 6 here
        });

然后在 Turn.js 的 init 函数中添加这一行

turnMethods = {
  init: function(options) {
    pagesInDOM = options.pagesInDOM; // retrieve and set the value,

【讨论】：

【解决方案2】：

pagesInDOM 变量在 turn.js 中是硬编码的，我还没有找到传递不同值的方法，因为 turn.js 扩展了 jQuery。我希望在实例化转弯时看到它作为一个选项可用，但该项目现在似乎已经死了。我找到的唯一解决方案是进入文件并手动为其分配一个不同的值，在您的情况下为pagesInDOM = 7;。

也就是说，在声明上方的未缩小版本中有一条评论：

// Number of pages in the DOM, minimum value: 6
pagesInDOM = 6,

我做了一些测试，当这本书有超过 4 页并且这个值低于 6 时，没有加载接近范围末尾的页面，并且在翻阅这本书时你会发现空白页。我相信这是由于 range 函数决定了在翻转时是否应该加载另一个页面。

来自 turn.js：

// Returns a range of pages that should be in the DOM
// Example:
// - page in the current view, return true
// * page is in the range, return true
// Otherwise, return false
// 1 2-3 4-5 6-7 8-9 10-11 12-13
//   **  **  --   **  **
range: function(page) {
    var remainingPages, left, right, view,
    data = this.data();
    page = page || data.tpage || data.page || 1;
    view = turnMethods._view.call(this, page);
    if (page<1 || page>data.totalPages)
        throw turnError('"'+page+'" is not a valid page');
    view[1] = view[1] || view[0];
    if (view[0]>=1 && view[1]<=data.totalPages) {
        remainingPages = Math.floor((pagesInDOM-2)/2);
        if (data.totalPages-view[1] > view[0]) {
            left = Math.min(view[0]-1, remainingPages);
            right = 2*remainingPages-left;
        } else {
            right = Math.min(data.totalPages-view[1], remainingPages);
            left = 2*remainingPages-right;
        }
    } else {
        left = pagesInDOM-1;
        right = pagesInDOM-1;
    }
    return [Math.max(1, view[0]-left),
            Math.min(data.totalPages, view[1]+right)];
},

简而言之，把turn.js中pagesInDOM的值改成7，应该就能达到你想要的结果了。

【讨论】：