我的 css3 转换和 JSON 很笨拙
我正在尝试使用phonegap为iOS应用程序的导航创建一个滑出面板。当我到达下面的页面并且 JSON 开始加载时，就会出现问题。首先，我在 xcode 的控制台中收到此错误：
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
加载所有图像后，我的 css3 过渡确实不稳定，即使它在每个其他页面上运行顺利。我想知道 AJAX 脚本是否不断地出去并尝试检索那些有错误的图像。因此我有一个无休止的脚本导致 ios 运行不稳定。有没有办法在检索图像后关闭脚本，或者您对如何解决此问题有其他想法吗？这是我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><a href="index.html"><div><img src="img/home-icon-white.png" /></div>Home</a></li>
<li class="where"><a href="where.html"><div><img src="img/where-icon-gray.png" /></div>Where</a></li>
<li class="series"><a href="watch.html"><div><img src="img/watch-icon-gray.png" /></div>Series</a></li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><a href="index.html"><div><img src="img/home-icon-white.png" /></div>Home</a></li>
<li class="where"><a href="where.html"><div><img src="img/where-icon-gray.png" /></div>Where</a></li>
<li class="series"><a href="watch.html"><div><img src="img/watch-icon-gray.png" /></div>Series</a></li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论