GIF Image is not animating in Firefox and IE Browser using blockUI

Question

gif image is not animating in Firefox(21.0) and IE(All Versions) Browsers while redirecting the page.The following code i'm using in usercontrol

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

-----Form code here----

</form>

jquery function :

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(); });
}

Please give a suitable idea for this issue. i have wasted lots of time for this.

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

There are so many known issues with ie and block UI not working.

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

This link has many relevent answers to your question. bLock UI Stopping and Block UI not working

edited May 23 '17 at 10:31

Community

1
1

answered Nov 19 '13 at 07:27

Sakthivel

1,890
2
21
47

score 0 · Answer 2 · answered Nov 19 '13 at 07:29

The form is in the process of being submitted. All animations will stop. Just add a normal button:

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

bind the onclick event, and then from onclick do:

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

or you can submit the form on the blockUI callback. I would personally not use any animation if the form is being submitted, if it does not take too long.

score 0 · Answer 3 · answered Jul 16 '14 at 13:33

The following was tested on:

1) Internet Explorer 11.0.9600.17105

2) Firefox 30.0

3) Crome 35.0.1916.153

All of the above browsers were running on Windows 7 Professional (64 bit).

The BlockUI Message Content

<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>

The JS Code

$(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')
                    });
});

GIF Image is not animating in Firefox and IE Browser using blockUI

3 Answers3