如何清除图片加载时的空白？ [英] how to remove white space when image loading?
本文介绍了如何清除图片加载时的空白？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的手机应用程序得到输出我有4图像自动滑动固定任何设备高度和宽度我的问题是滑动图像，我得到白色屏幕之前图像加载
我的代码是： -
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =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 =pageid =index>
< div data-role =contentclass =slideshow>
< div id =container>
< img src =1.jpgalt =height =100％width =auto/>< br />
< div class =caption> < font color =white>第二个dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd< br /> asdasdasd asdadasd asdasdad< / font>< a href =http://www.google.comstyle =text-decoration：none>& nbsp;& nbsp;< font color =white >< span class =one> skip< / span>< / font>< / a>< / div>
< / div>
< div id =container>
< img src =2.jpgalt =/>< br />
< div class =caption>< font color =white>第一秒dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd< br / asdasdasd asdadasd asdasdad< / font>< a href =G：\html practice phonegap\responsive\validationform.htmlstyle =text-decoration：none>& nbsp;& nbsp; font color =white>< span class =one> skip< / span>< / font>< / a>
< / div>
< / div>
< div id =container>
< img src =3.jpgalt =/>< br />
< div class =caption>< font color =white>三秒dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd< br / asdasdasd asdadasd asdasdad< / font>< a href =G：\html practice phonegap\responsive\validationform.htmlstyle =text-decoration：none>& nbsp;& nbsp; font color =white>< span class =one> skip< / span>< / font>< / a>
< / div>
< / div>
< div id =container>
< img src =4.jpgalt =/>< br />
< div class =caption>< font color =white> fourth第二dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd< br / asdasdasd asdadasd asdasdad< / font>< a href =G：\html practice phonegap\responsive\validationform.htmlstyle =text-decoration：none>& nbsp;& nbsp; font color =white>< span class =one> skip< / span>< / font>< / a>
< / div>
< / div>
< / div>
< / div>
< / body>
< script>
$（document）.on（'pageshow'，'#index'，function（）{
$（。slideshow> div：gt ）.hide（）;
setInterval（function（）{
var currentSlide = $（'。slideshow> div：visible：first'），
nextSlide = currentSlide。 next（）;
currentSlide.fadeOut（1）
nextSlide.fadeIn（2000）;
if 4）{
Redirect（）;
}
}，2000）;
function Redirect（）{
window.location =https://www.google.co.in;
}
}）;
< / script>
< / html>
我的代码工作不错，但当图像滑动第一个白色屏幕将显示，然后图像显示
如何隐藏白屏？
解决方案
这是jQuery Mobile中的一个已知问题，有助于在一定程度上解决这个问题。根据 jQuery Mobile文档
一些平台目前有转换问题。我们正在工作
解决方案来解决每个人的问题。如果您是
在过渡期间或过渡结束时遇到闪烁和闪烁
，我们建议以下解决方法。请注意，此解决方法
应在部署前在目标平台上进行彻底测试。
此解决方法已知会导致性能问题，浏览器
崩溃在一些平台，特别是Android。将以下代码
添加到您的自定义css。
.ui- -webkit-backface-visibility：hidden; }
要查看所有转换类型，您必须在支持3D转换的浏览器上
。默认情况下，
缺少3D支持的设备（例如Android 2.x）将会为所有
转换类型回退到淡入淡出。此行为是可配置的（请参见下文）。
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 :-
<!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?
解决方案
This is a known problem in jQuery Mobile and turning backface visibility off helps to solve this problem to an extent. As per jQuery Mobile Docs
Some platforms currently have issues with transitions. We are working on a solution to solve the problem for everyone. If you are experiencing flickers and flashes during or at the end of a transition we suggest the following workaround. Please note that this workaround should be thoroughly tested on the target platform before deployment. This workaround is known to cause performance issues and browser crashes on some platforms, especially Android. Add the following code to your custom css.
.ui-page { -webkit-backface-visibility: hidden; }
Only seeing fade transitions? To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
这篇关于如何清除图片加载时的空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
