How to add loading bar to script

How to add loading bar to script

I'm having an issue with a loading bar in some different browsers. Currently when it pops up, it gives a loading status on my page. On IE the image that is "addpended" to the div works OK and users can see the gif, in other browsers it is either no present or the alternative image, and I cant seem to make the behavior consistant.
 
here is what it looks like In IE

Here is Chrome
 
and Finally Firefox
 
Here is the controller script for this porgress bar...
  1. return
 {
  • init:
  • function () {
  • $(
  • "#top-menu").menubar(menuitems);
  • $(
  • 'a.waitDlg').click(function () {
  • var loading2 = $('#loading2');
  • if ( loading2.has('img').size() == 0) {
  • $(
  • '#loading2').append('<img id="loadingImage" src="/Content/Images/ajax-loader-1.gif" alt="Loading Progress Bar" />');
  • }
  • $(
  • '#loading2').dialog({
  • dialogClass:
  • "no-close",
  • modal:
  • true,
  • draggable:
  • false,
  • title:
  • "Please Wait...",
  • width: 257
  • });
    •  
    Im not sure how to fix this isuse, I can debug the site, and pull the image from the source, and it was loaded fully for example in Chrome. Not sure how to fix this issue right now but it looks terrible. Any thoughts on how to fix this?