加载图像时如何删除空白？答案

【问题标题】：how to remove white space when image loading?加载图像时如何删除空白？
【发布时间】：2014-05-15 06:04:36
【问题描述】：

我的 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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&nbsp;&nbsp;<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">&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(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>

我的代码运行良好，但是当图像滑动时会显示第一个白屏，然后显示图像

如何隐藏白屏？

Demo

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

这似乎是一个存在一段时间的已知问题。这是由于 jquery 默认页面转换效果造成的。https://forum.jquery.com/topic/transition-flashing-showing-white-page-between-pages

我所做的工作是我的 js 中的以下代码。它有效。希望它也适用于你

$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = 'none';
});

只需尝试根据您的 jQM 版本覆盖过渡效果

【讨论】：

感谢回复我会试试的
能否请您告诉我将此代码放在我的 Html 文件中的什么位置。由于我的 Js 文件是从 Google 获取的，所以我不知道过渡效果何时会发生
尝试将它添加到正文标签内html页面底部的脚本标签内
我按照你说的那样尝试过mycode ......$(document).bind("mobileinit", function () { $.mobile.defaultPageTransition = 'none'; }); 但是空白没有被删除请给出关于删除空白的任何想法

【解决方案2】：

这是 jQuery Mobile 中的一个已知问题，关闭背面可见性有助于在一定程度上解决此问题。根据jQuery Mobile Docs

目前某些平台存在转场问题。我们正在工作上一个解决方案，为大家解决问题。如果你是在过渡期间或过渡结束时经历闪烁和闪烁我们建议以下解决方法。请注意，此解决方法部署前应在目标平台上进行彻底测试。已知此解决方法会导致性能问题和浏览器在某些平台上崩溃，尤其是 Android。添加以下代码到您的自定义 css。

.ui-page { -webkit-backface-visibility: hidden; }

只看到淡入淡出过渡？要查看所有转换类型，您必须在支持 3D 变换的浏览器上。默认情况下，设备缺乏 3D 支持（例如 Android 2.x）将回退到对所有人“淡出” 过渡类型。此行为是可配置的（见下文）。

【讨论】：