我使用此处提供的示例创建了一个动态生成的内容示例,以便使用 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 的输出。