loading image for blockui on form submit

[xxkylexx]

Hey guys,
I am trying to use the blockui jquery plugin in order to block a div that
contains my file uploader while the file is in the process of
uploading (form is being submitted).

I have successfully achieved this, however, I want to display a cool
little animated loading .gif in the blockui message, but am having
issues getting it to load, and animate in some browsers (ff and ie6).

I think the problem is that the image isn't getting enough time to
load or something before the submit begins. I am using a javascript
submit() to handle submitting the form, and then trigger the blockui.

You can see this working in action here (as well as view my source):
click here . Just upload an image to see the issue I am
describing.

Thanks for any help.

-Kyle

[Northie]

I was having a similar issue, again with a file upload, but using my own few lines of jquery - not the blockui plugin

I had a quick look in the code for the thickbox plugin (which i've used in other areas of the project), which has an animated gif on a 'greyed out' screen before a modal window pops up.

The code was preloading the image:

eg

PHP Code:

/*javascript*/

//preload
var myPic = new Image();
myPic.src = "../path/to/gif/";

//display
....."<img src='"+myPic.src+"' />"........; 


This displayed the image in all browsers, yet it failed to animate in IE.

It's not a high priority part of my project at the moment, so I'll be revisiting it a bit later.....and i'll probably start by taking a more in depth look at the thickbox code.

[xxkylexx]

Ok great. I've found a magic combination here.

Javascript preloading the images works for FF, and IE6, but not IE7.

DOM message loading works for FF, but not IE7 or IE6

Doing it the normal way before, but loading the image in a
display:none; div, it works in all 3 browsers.

<script type="text/javascript" >
//blockui upload form
$.blockUI.defaults.overlayCSS.backgroundColor = '#ffffff';
$(function() {
        $('.upload-form').submit(function () {
                $('div.upload-box').block({
                        message: '<img src="/images/ajax-loader.gif" alt=""/><h1>Uploading...</h1>',

                        css: {
                                border: 'none',
                                background: 'none'
                        }
                });
        });
});

</script>

.....

<div style="display: none;">
   <img src="/images/ajax-loader.gif" alt="" />
</div>

Not the best solution, I'm sure ... but it works.

[sirisha]

/*javascript*/

//preload
var myPic = new Image();
myPic.src = "../path/to/gif/";

//display
....."<img src='"+myPic.src+"' />"........;