Периодическое обновление динамических страниц книги с помощью Turn.js

Я создал пример динамически генерируемого контента для просмотра с помощью 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 может быть или не быть доступным на веб-сервере во время запроса. Они станут доступны через несколько (а иногда и много) секунд спустя. Поэтому я хотел бы иметь возможность отображать некоторый контент типа «Загрузка ...» по умолчанию, если png недоступен и периодически обновляться (т.е. каждые x секунд), пока фактический png не станет доступным. У меня нет проблем с изменением вывода getPage, если это необходимо.


javascript jquery ajax turnjs
person sourb    schedule 21.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне удалось сделать эту работу самостоятельно, внеся следующие изменения:

getPage теперь возвращает <div class="loader"><img src="docs/local/ajax-loader.gif" alt="" /></div>, если запрошенный png недоступен.

На вызывающей странице я изменил свой код, чтобы проверить строку «загрузчик», и если она найдена (что означает, что 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);
             });
    }

Может быть, есть лучший способ добиться этого, но, по крайней мере, он работает.

person sourb    schedule 28.08.2014