我已经创建了一个动态生成的内容的示例,可以使用此处提供的示例使用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是<div class="page"><img src="docs/local/abcd_1.png" alt="" /></div>
根据ajax请求返回的jsp或任何其他页号。
我的问题是,在请求时png的请求在Web服务器上可能可用,也可能不可用。它们将在几秒钟(有时是几秒钟)后变为可用。因此,如果png不可用,我希望能够显示一些默认的“正在加载...”类型的内容,并定期(即每x秒)刷新一次,直到实际的png可用为止。如果需要,更改getPage的输出没有问题。
我已经通过进行以下更改来使自己完成这项工作:
<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);
});
}
也许有更好的方法可以实现这一目标,但至少可以奏效。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句