Jquery 加载图像时如何删除空白？
我的手机gap应用程序获得输出我有4个图像自动滑动它固定了任何设备的高度和宽度我的问题是，当滑动图像时，我在加载图像之前得到了白色屏幕 我的代码是：-Jquery 加载图像时如何删除空白？,jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,我的手机gap应用程序获得输出我有4个图像自动滑动它固定了任何设备的高度和宽度我的问题是，当滑动图像时，我在加载图像之前得到了白色屏幕 我的代码是：- <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery
<!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>
.标题{
显示：块；
位置：固定；
z指数：2000；
字体大小：20px；
文本阴影：无
颜色：#fff；
背景：#000；
背景：rgba（0,0,0,8）；
左：0；
右：0；
底部：0；
填充：10px 20px；
/*保证金：-2；
利润上限：-70px*/
最大宽度：无；
}
img{
填充：0；
保证金：0；
}
.1{
浮球：对
}
html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
.ui内容{
填充：0；
保证金：0；
}
#容器{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
$（窗口）。调整大小（函数（）{
设置高度（）；
});
$（document）.on（'pageshow'，'#index'，function（）{
设置高度（）；
});
函数setHeight（）{
$.mobile.activePage.find（'.ui content'）.height（getRealContentHeight（））；
$.mobile.activePage.find（'img'）.height（getRealContentHeight（）-4）；
}
函数getRealContentHeight（）{
var header=$.mobile.activePage.find（“div[data role='header']：可见”）；
var footer=$.mobile.activePage.find（“div[data role='footer']：visible”）；
var content=$.mobile.activePage.find（“div[data role='content']：visible:visible”）；
var viewport_height=$（窗口）.height（）；
var content\u height=viewport\u height-header.outerHeight（）-footer.outerHeight（）-2；
如果（（content.outerHeight（）-header.outerHeight（）-footer.outerHeight（））这似乎是一个已经存在了一段时间的已知问题。这是由于jquery默认页面转换的影响
我所做的工作是在我的js中使用以下代码。它起作用了。希望它对你也起作用
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});
只需根据您的jQM版本尝试覆盖过渡效果这是jQuery Mobile中的一个已知问题，关闭背面可见性有助于在一定程度上解决此问题
一些平台目前存在转换问题。我们正在工作
为每个人解决问题的解决方案。如果你是
在过渡期间或过渡结束时经历闪烁和闪烁
我们建议以下解决方法。请注意，此解决方法
应在部署前在目标平台上进行彻底测试。
已知此解决方法会导致性能问题和浏览器故障
在某些平台上崩溃，尤其是Android
到您的自定义css
仅查看淡入淡出过渡？若要查看所有过渡类型，必须
位于支持三维变换的浏览器上。默认情况下，设备
缺乏3D支持（比如Android 2.x）会让所有人都退到“淡入淡出”状态
转换类型。此行为是可配置的（见下文）
谢谢你的回复，我会试着告诉我把这些代码放在我的Html文件里的什么地方。因为我的Js文件是从Google上取下来的，我不知道什么时候转换会起作用。把它添加到你Html页面底部的脚本标签里，在body标签里。我试着像你说的那样，比如emycode…$（document）。bind（“mobileinit”，函数（）{$.mobile.defaultPageTransition='none'；}）；但是没有删除空白。请给出删除空白的想法
.ui-page { -webkit-backface-visibility: hidden; }