Percent loader slow to intialise in FF / Chrome, works perfectly in IE

[1DMF]

Hi,

I'm using the following progress percentage loader widget :

http://widgets.better2web.com/loader/

I initialise it with

// initialise progress meter
initMeter('progressMeter',150);

function initMeter(id,size)
{
    // initialise upload meter
    uploader = $('#'+id).percentageLoader({width: size, height: size, controllable : false, progress : 0.5});
    uploader.setProgress(0);
    uploader.setValue('0'+sizeUnit);
}

And I have a callback function for progress update via the XHR2 progress EventListener when submitting the file upload via AJAX / FormData

function showProgress(e)
{
    var loaded;
    
    if(e.lengthComputable)
    {
        if(sizeUnit == 'MB')
        {
            loaded = (Math.round(e.loaded * 100 / (1024 * 1024)) / 100);
        }
        else
        {
            loaded = (Math.round(e.loaded * 100 / 1024) / 100);
        }        
        
         uploader.setProgress(loaded / fileSize);
         uploader.setValue(loaded.toString() + sizeUnit);

    }
}

When the meter loads in IE, I see the gauge image and the progress moving along with the percentage loaded in the middle and the amount of KB/MB processed at the bottom, works exactly as desired.

However, when viewing in FF/Chrome, I see the gauge image and the progress moving, but the centre percentage and the number of KB/MB uploaded takes a few seconds to show on large files, and for small files, it finishes uploading before the gauge information is even displayed?

Why is FF/Chrome taking so long to initialise the widget information?

Your input is appreciated.

1DMF


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[jpadie]

interesting question. can you provide a link to a site you have this set up on?

one immediate thought: have you normalised the box model between browsers?
another is that if there is an issue it may be related to the value of e.lengthComputable. try putting some footprinting around that.

 

[1DMF]

I'll email you a link as don't have anything public available to post.

"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music

 

[1DMF]

I believe this was a timing issue, as I was calling AJAX to upload the FormData immediately after calling the initMeter function all from within the sendForm function

So I moved the initMeter call to the $(on.submit) of the form, which then calls the sendForm function which starts the AJAX upload and callback for progress, all seems to be working fine.


"In complete darkness we are all the same, it is only our knowledge and wisdom that separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!"
Free Electronic Dance Music