turn.js 异步请求图片资源，实现电子书翻页效果报错 ”The page 1 dose not exist”

最新推荐文章于 2022-08-28 01:03:35 发布

格格巫仙女

最新推荐文章于 2022-08-28 01:03:35 发布

阅读量1.3k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42340514/article/details/100991839

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

pc 端时好时坏，时不时报错

经调试发现是异步请求问题，如果渲染前拿到数据就不会报错，否则就会报错。解决方案：改变渲染界面的代码位置，将渲染界面的代码放在异步请求的回调中去，拿到数据后在调用渲染

<!doctype html>





<html lang="en">

<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="~/Areas/Web/Scripts/modernizr.2.5.3.min.js"></script>
</head>
<body>
<div class="close" id="close"><img src="~/Areas/Web/Images/close.png" alt="" style="width:45px"></div>
<div style="background:rgba(0,0,0,0.7);width: 100%;height: 100%;position:fixed;top: 0;left: 0;z-index:999"></div>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">

</div>
</div>
</div>

}
$(".flipbook").append(html);
yepnope({
test: Modernizr.csstransforms,
yep: ['../../Areas/Web/Scripts/turn.min.js'],
nope: ['../../Areas/Web/Scripts/turn.html4.min.js'],
both: ['../../Areas/Web/Content/basic.css'],
complete: loadApp
});

})
}

function loadApp() {
// Create the flipbook
var winWide = window.screen.width; //获取当前屏幕分辨率
if (winWide >= 1680) {
$('.flipbook').turn({
// Width

//width:922,
width: 1180,
// Height

height: 800,

// Elevation

elevation: 50,

// Enable gradients

gradients: true,

// Auto center this flipbook

autoCenter: true

});
} else{
$('.flipbook').turn({
// Width

//width:922,
width: 1000,
// Height

height: 620,

// Elevation

elevation: 50,

// Enable gradients

gradients: true,

// Auto center this flipbook

autoCenter: true

});
}

}

// Load the HTML4 version if there's not CSS transform

//获取URL中值
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
function getId() {
id = getQueryString("id");
if (!id) return;
}
$('#close').click(function () {
window.location.href = "./Index";
})
</script>

</body>
</html>

格格巫仙女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
turn.js 异步请求图片资源，实现电子书翻页效果报错 ”The page 1 dose not exist”

pc 端时好时坏，时不时报错经调试发现是异步请求问题，如果渲染前拿到数据就不会报错，否则就会报错。解决方案：改变渲染界面的代码位置，将渲染界面的代码放在异步请求的回调中去，拿到数据后在调用渲染<!doctype html><!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-...
复制链接

扫一扫