图像加载时如何去除空白？
[英]how to remove white space when image loading?
问题描述
My phone-gap app getting output I have 4 images sliding automatically it fixed any Device height and width my problem is while sliding images, I am getting white screen before image loading my code is :- 
我的手机间隙应用程序获取输出，我有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>
My code is working nice but when image sliding first white screen will be displayed and then images display 我的代码工作正常，但是当图像滑动时将先显示白屏，然后显示图像
How to hide the white screen? 如何隐藏白屏？
2 个解决方案
解决方案1
0 2014-05-15 09:56:11
This seems to be a know issue running around for a while.This is due to jquery default page transition effects. 这似乎是一个运行一段时间的已知问题。这是由于jquery的默认页面过渡效果所致。 https://forum.jquery.com/topic/transition-flashing-showing-white-page-between-pages https://forum.jquery.com/topic/transition-flashing-showing-white-page-between-pages
The work around I did was the following code in my js .It worked.Hope it works for you too 我所做的工作是我的js中的以下代码，它起作用了，希望它也对您有用
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});
Just try overwritting transition effect as per your jQM version 只需按照您的jQM版本尝试覆盖过渡效果
解决方案2
0 2014-05-22 06:09:19
This is a known problem in jQuery Mobile and turning backface visibility off helps to solve this problem to an extent. 这是jQuery Mobile中的一个已知问题，关闭背面可见性有助于在一定程度上解决此问题。 As per jQuery Mobile Docs 根据jQuery Mobile Docs
Some platforms currently have issues with transitions.
.ui-page { -webkit-backface-visibility: hidden; }
Only seeing fade transitions?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.