我的 phone-gap 应用程序获得输出我有 4 个图像自动滑动它固定了任何设备高度和宽度我的问题是在滑动图像时，我在图像加载之前出现白屏 我的代码是:-
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>
<style>
.caption {
display: block;
position: fixed;
z-index: 2000;
font-size: 20px;
text-shadow: none
color: #fff;
background: #000;
background: rgba(0,0,0, .8);
left: 0;
right: 0;
bottom: 0;
padding: 10px 20px;
/*margin: -2;
margin-top:-70px;*/
max-width: none;
}
img {
padding: 0;
margin: 0;
}
.one{
float:right
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.ui-content {
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script>
$(window).resize(function() {
setHeight();
});
$(document).on('pageshow', '#index', function(){
setHeight();
});
function setHeight() {
$.mobile.activePage.find('.ui-content').height(getRealContentHeight());
$.mobile.activePage.find('img').height(getRealContentHeight()-4);
}
function getRealContentHeight() {
var header = $.mobile.activePage.find("div[data-role='header']:visible");
var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight() -2;
if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
content_height -= (content.outerHeight() - content.height());
}
return content_height;
}
</script>
<body>
<div data-role="page" id="index">
<div data-role="content" class="slideshow">
<div id="container">
<img src="1.jpg" alt="" height="100%" width="auto"/><br/>
<div class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none"> <font color="white"><span class="one">skip</span></font></a></div>
</div>
<div id="container">
<img src="2.jpg" alt=""/><br/>
<div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"> <font color="white"><span class="one">skip</span></font></a>
</div>
</div>
<div id="container">
<img src="3.jpg" alt=""/><br/>
<div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"> <font color="white"><span class="one">skip</span></font></a>
</div>
</div>
<div id="container">
<img src="4.jpg" alt=""/><br/>
<div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none"> <font color="white"><span class="one">skip</span></font></a>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).on('pageshow', '#index', function(){
$(".slideshow > div:gt(0)").hide();
setInterval(function() {
var currentSlide = $('.slideshow > div:visible:first'),
nextSlide = currentSlide.next();
currentSlide.fadeOut(1)
nextSlide.fadeIn(2000);
if ((currentSlide.index() + 1) == 4) {
Redirect();
}
}, 2000);
function Redirect() {
window.location="https://www.google.co.in";
}
});
</script>
</html>
我的代码运行良好，但是当图像滑动时，首先会显示白屏，然后显示图像
如何隐藏白屏？
最佳答案
这似乎是一个运行了一段时间的已知问题。这是由于 jquery 默认页面转换效果。 https://forum.jquery.com/topic/transition-flashing-showing-white-page-between-pages
我所做的工作是在我的 js 中添加以下代码。它起作用了。希望它也对你有用
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});
只需根据您的 jQM 版本尝试覆盖过渡效果
关于jquery - 图片加载时如何去除空白？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23670417/