Question

重定向页面时，gif图像在Firefox（21.0）和IE（所有版本）浏览器中没有动画。我在usercontrol中使用以下代码

<form method="post" name="frmhotelsearch" onsubmit="ShowProgress()" id="frm_<%=(int)Model.SearchProductType%>_Search" action="/Product/ProductResults">

-----这里的表格代码----

</form>

jquery函数：

var myPicProgress = new Image();
myPicProgress.src = "../../Frontend/b2b/images/busy.gif";

function ShowProgress() 
{
$.blockUI({ message: '<h1><img src=' + myPicProgress.src + ' />' + 'Just a Moment' + '</h1>', showOverlay: false }).on('beforeload', function () { $.blockUI(); });
}

请针对此问题提出合适的建议。我浪费了很多时间。

Answer 1

ie和阻止用户界面无法解决的问题很多。

It's a known bug (limitation) of IE. You could use javascript to solve it. Just preload image and change source (<img src="?">) of freezing image to that preloaded image on "onbeforeunload" action

此链接对您的问题有许多相关的答案。 bLock UI Stopping和Block UI not working

Answer 2

表单正在提交中。所有动画都将停止。只需添加一个普通按钮：

<input type='button' id='btnSubmit' />

绑定onclick事件，然后从onclick执行：

..code to show the blockUI
$('form').submit();

或者您可以在blockUI回调上提交表单。如果提交表单，我个人不会使用任何动画，如果不需要太长时间。

Answer 3

以下测试：

1）Internet Explorer 11.0.9600.17105

2）Firefox 30.0

3）Crome 35.0.1916.153

以上所有浏览器都在Windows 7 Professional（64位）上运行。

BlockUI消息内容

<div id="busyMessage" name="busyMessage" hidden="hidden" style='margin:0 auto; vertical-align:middle; text-align:center;'>
    <img src="@Url.Content("~/Images/Busy.gif")" alt="I am busy..." id="busyImage" />
    <br/>
    <label style='font-size:24px;'>Working...</label>
</div>

JS代码

$(document).ready(function () {

    //Preserve the original image source.
    var originalSource = $('#busyImage').attr('src');

    //Reset the current image source.
    $('#busyImage').attr('src', originalSource + "?" + new Date().getTime());

    $.blockUI({ css: {
                border: 'none',
                padding: '15px',
                backgroundColor: 'none',
                '-webkit-border-radius': '10px',
                '-moz-border-radius': '10px',
                opacity: .5,
                color: '#fff',
                baseZ: 9000
                },
                message: $('#busyMessage')
                    });
});

在使用blockUI的Firefox和IE浏览器中，GIF图像不是动画

3 个答案: