2

我使用此处提供的示例创建了一个动态生成的内容示例,以便使用 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,它<div class="page"><img src="docs/local/abcd_1.png" alt="" /></div>根据 ajax 请求返回或任何其他页码。

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

4

1 回答 1

1

通过进行以下更改,我自己设法完成了这项工作:

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

在调用页面中,我更改了代码以检查“loader”字符串,如果找到(这意味着 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);
             });
    }

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

于 2014-08-28T15:04:52.393 回答