Question

我有一个网页，我点击一个按钮进行ajax调用，然后单击按钮后会弹出一个.gif图像。 Bellow代码我曾经这样做过

HTML

<div class="overlay" id="enrollMeLoading" style="display:none">
    <img src="~/Images/loading.gif" style="width: 6%; margin-left: 43%; margin-top: 25%;" />
</div>

Jquery：点击一个按钮，这个图像必须显示

$('#enrollMeLoading').show();

此功能在Firefox中有效，但当我在Chrome中尝试时，它不显示图像。

请帮我解决问题。

Answer 1

试试这个 DEMO

HTML：

<input type="button" id="btn" value="show imgae" />

<div class="overlay" id="enrollMeLoading" >
    <img src="~/Images/loading.gif" style="width: 6%; margin-left: 43%; margin-top: 25%;" />
</div>

CSS：

#enrollMeLoading  {
    border:1px solid #f00;
    min-height:200px;
}

#enrollMeLoading img {
    border:1px solid #f00;
    min-height:200px;
    display:none;
}

jquery的：

$(function(){
    $('#btn').on('click',function(){
        $('#enrollMeLoading img').css('display','block');    
    }) 
})

注意：你不能给当前元素显示，必须创建单独的按钮

Answer 2

在按钮上单击此代码。

     $('#enrollMeLoading').show();                           
          setTimeout(function(){
//Make your ajax call here
    }, 100);

在这种情况下，gif出现，然后ajax调用发生。如果你在show语句旁边进行ajax调用，那么gif就不会出现在大多数时候了。

div和图片不会在Chrome中显示

2 个答案: