使用 turn.js 定期刷新书籍的动态页面答案

【问题标题】：Periodic refresh of a book's dynamic pages using turn.js使用 turn.js 定期刷新书籍的动态页面
【发布时间】：2014-10-15 05:18:49
【问题描述】：

我创建了一个动态生成内容的示例，该示例使用提供的示例 here 使用 turn.js 进行查看。

这是我目前拥有的部分代码：

<body>
   <div id="paper">
   </div>
</body>

<script type="text/javascript">
    $(window).ready(function() {
        $('#paper').turn({pages: 12});
    });

    $('#paper').bind('turning', function(e, page) {
          var range = $(this).turn('range', page);
          for (page = range[0]; page<=range[1]; page++)
            addPage(page, $(this));
        });

    function addPage(page, book) {
           // Check if the page is not in the book
          if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />').html('Loading…');
            // Add the page
            book.turn('addPage', element, page);
            // Get the data for this page   
           $.ajax({url: "getPage?filename=abcd&page="+page})
             .done(function(data) {
               element.html(data);
             });
           }
        }
</script>

getPage 是一个 jsp，它根据 ajax 请求返回 <div class="page"><img src="docs/local/abcd_1.png" alt="" /></div> 或任何其他页码。

我遇到的问题是，请求的 png 可能在请求时在 Web 服务器上可用，也可能不可用。它们将在几（或有时很多）秒后变为可用。因此，如果 png 不可用，我希望能够显示一些默认的“正在加载...”类型的内容，并定期刷新（即每 x 秒），直到实际的 png 可用。如果需要，我可以更改 getPage 的输出。

【问题讨论】：

标签： javascript jquery ajax turnjs

【解决方案1】：

我已经通过进行以下更改自己完成了这项工作：

如果请求的 png 不可用，getPage 现在返回 <div class="loader"><img src="docs/local/ajax-loader.gif" alt="" /></div>。

在调用页面中，我更改了代码以检查“加载程序”字符串，如果找到（这意味着 png 不可用），则调用 setTimeout，在给定时间后重试获取图像：

<body>
   <div id="paper">
   </div>
</body>

<script type="text/javascript">
    $(window).ready(function() {
        $('#paper').turn({pages: <s:property value='pages'/>});
    });

    $('#paper').bind('turning', function(e, page) {
          var range = $(this).turn('range', page);
          for (page = range[0]; page<=range[1]; page++)
            addPage(page, $(this));
        });

    function addPage(page, book) {
           // Check if the page is not in the book
          if (!book.turn('hasPage', page)) {
            // Create an element for this page
            var element = $('<div />').html('Loading…');
            // Add the page
            book.turn('addPage', element, page);
            // Get the data for this page   
            refreshPage(element,page);
          }
        }

    function refreshPage( element, page )
    {
           $.ajax({url: "getPage?filename=<s:property value='filename'/>&page="+page})
             .done(function(data) {
               if( data.indexOf( "loader") > -1 )
               {
                   setTimeout(function() {
                       refreshPage(element,page);
                    }, 5000);
               }
               element.html(data);
             });
    }

也许有更好的方法来实现这一点，但至少它有效。

【讨论】：