Question

我在使div可见并隐藏时遇到问题。以下是我的设计..

<div class="sidebar_contents_container inactive_step" id="step-trip-mode">
<div id="Progressbar" style="position:fixed;width:100%;height:100%;z-index:999;background: rgba(0,0,0,0);display:none;">
    <div style="background-image:url('../images/progress_bar.gif');width:8%;height:17%;top:50%;left:50%;position:fixed;"></div>
</div>
<div class="settings_container">
    <div class="header">Register Your Device Id</div>
    <div class="intro-content">
        <div class="intro-content-middle">
            <span class="title" style="text-align: center;padding-right: 155px ">Device Id <font color="red">*</font>:</span>
            <div style="margin: 2px;">
                <!--<font size="4">Device Id : </font><font size="3" color="red">*</font></br>-->
                <input id="device_Id" type='text' class="txtbox" placeholder="Device Id"style="width:250px;height: 40px;"/disabled>
                <div style="color:red;visibility: hidden;">Device</div>
            </div>
            <span class="title" style="text-align: center;padding-right:140px;">Device Sim<font color="red">*</font>: </span>
            <div style="margin: 2px;">
                <input id="device_sim_number" type='text' class="txtbox" placeholder="Device Sim"style="width:250px;height: 40px;" maxlength="15"/>
                <div style="color:red; visibility: hidden;" id="device_sim_number1">Field can not be Blank.</div>
            </div>
            <span class="title" style="text-align: center;padding-right:140px;">First Name <font color="red">*</font>: </span>
            <div style="margin: 2px;">
                <input id="txtFName" type='text' class="txtbox" placeholder="First Name" style="width:250px;height: 40px;" maxlength="100"/>
                <div style="color:red;visibility: hidden;" id="txtFName1">Field can not be Blank.</div>
            </div>
            <div style="/* margin: 30px; */position: absolute;width: 98%;bottom: 35px;">

            </div>
        </div>
    </div>
    <div style="/* margin: 30px; */position: absolute;width: 98%;bottom: 35px;">
        <button id="SaveDeviceData" type="submit" class="btn-active" onclick="Checkvalidation2()" >Register</button>
    </div>      
</div>

请仅从设计角度考虑这些因素我没有提及整个代码。

关键注意这里我创建了div，其中包含我在div中的GIF，我希望使用jquery使其可见并隐藏。

我使用jquery控制可见性的工作。

function Checkvalidation2(){
  $("#Progressbar").css('display','block');
  save();
}

function save(){
  testing();
}

function testing(){
  $("#Progressbar").css('display','none');
}

通过使用上面的代码我到目前为止所遇到的是gif没有显示。如果我只使用$("#Progressbar").css('display','block');并且不显示'无'，则会在10秒或更长时间后加载。

但是，我正在网页上获取该元素。

Answer 1

首先，你应该使用Alvro和Marty所提到的show（）和hide（）。

其次，你的gif可能很大并且需要时间来加载。您可以通过以这种方式预加载来加快加载速度

<div class="hidden">
<script type="text/javascript">
    <!--//--><![CDATA[//><!--

        if (document.images) {
            img1 = new Image();
            img2 = new Image();
            img3 = new Image();

            img1.src = "http://domain.tld/path/to/image-001.gif";
            img2.src = "http://domain.tld/path/to/image-002.gif";
            img3.src = "http://domain.tld/path/to/image-003.gif";
        }

    //--><!]]>
</script>

我从here获得了此代码。它还有其他一些预加载图像的方法，但我上面粘贴的是最简单的imho。

你还应该压缩你的gif以减小它的大小。有许多在线图像压缩器。

一切顺利。

延迟显示和隐藏包含gif图像的div

1 个答案: