我创建了一个动态生成内容的示例，使用提供的示例使用 turn.js 查看 here .
这是我目前拥有的部分代码:
<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 是一个返回 <div class="page"><img src="docs/local/abcd_1.png" alt="" /></div> 的 jsp或根据 ajax 请求的任何其他页码。
我遇到的问题是，在请求时，请求的 png 在 Web 服务器上可能可用，也可能不可用。它们将在数秒(或有时数秒)后可用。因此，如果 png 不可用，我希望能够显示一些默认的“正在加载...”类型的内容，并定期刷新(即每 x 秒)，直到实际的 png 可用。如果需要，我可以更改 getPage 的输出。
最佳答案
通过进行以下更改，我自己成功完成了这项工作:
getPage 现在返回 <div class="loader"><img src="docs/local/ajax-loader.gif" alt="" /></div>如果请求的 png 不可用。
在调用页面中，我更改了我的代码以检查“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);
});
}
也许有更好的方法来实现这一点，但至少它有效。
关于javascript - 使用 turn.js 定期刷新书籍的动态页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25428612/