Preloader hanging/freezing with "hiccups"

I've developed a flash-based site for a client who has an account with GoDaddy and have uploaded all files successfully to the hosting server. The site consists of an initial preloader named “preloader.swf”, which loads an external SWF file named “main.swf” that contains different sections including an image-gallery section.

However, I notice that at times (as not always this happens) the initial flash preloader for the main flash-based site loads faster than usual with "hiccups". This results in when having to view an image in the gallery section of the site (where each image is loaded externally from the server having a preloader of its own), the selected image loads in a jagged manner with "hiccups" (for instance from 22% it pauses then jumps immediately to 31%, then pauses again and jumps immediately to 47%, and so on).

Then, at a point in time, the preloader suddenly freezes/hangs the entire site, having no other choice but to refresh the site.

Only then, once the preloader of the image has froze and the site is refreshed, or the cache is cleared, will the entire site work perfectly as supposed to - i.e. the initial preloader loads more slower and smoother, and the preloaders of when the images are loading are more smoother as well (no sudden jumps in the percentages as before; the preloader loads in normal increments).

Could anyone please tell me what the problem might be with a possible solution in how I can make the site load smoothly always without having to encounter any hiccups, freezing and hanging, as I've been checking my code over and over again but I can't find anything wrong with it?

I was doing some research and read that the cause might be because of the following line "ProgressEvent.PROGRESS" as it might not fire at times in IE or Firefox. Is that so? If so, what alternative must I take?

Hope to be hearing a reply as soon as possible.

Thanks & Regards.

P.S. Below I have included the AS coding for my initial preloader to load the main site (not the preloader used to load images):

import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.ProgressEvent;

//no scale;
stage.scaleMode = StageScaleMode.NO_SCALE;

//align to top left
stage.align = StageAlign.TOP_LEFT;

stage.addEventListener(Event.RESIZE, onPreloaderResize);
addEventListener(Event.ENTER_FRAME, onPreloaderEnter);

angel_pic.alpha = 0;

top_left_line.visible = false;
top_right_line.visible = false;
side_left_line.visible = false;
side_right_line.visible = false;
bottom_left_line.v开发者_运维百科isible = false;
bottom_right_line.visible = false;

var req:URLRequest = new URLRequest("main.swf");
var loader:Loader = new Loader();
loader.load(req);

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

function showProgress(event:ProgressEvent):void
{
    var percent:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);

    if ((percent > 0) && (percent <= 34))
    {
        top_left_line.visible = true;
        top_right_line.visible = true;

        top_left_line.width = percent * ((angel_pic.width / 2) / 34);
        top_right_line.width = percent * ((angel_pic.width / 2) / 34);
    }
    else
    {
        if ((percent > 34) && (percent <= 66))
        {
            side_left_line.visible = true;
            side_right_line.visible = true;

            side_left_line.height = (percent - 34) * (angel_pic.height / 32);
            side_right_line.height = (percent - 34) * (angel_pic.height / 32);
        }
        else
        {
            if (percent > 66)
            {
                bottom_left_line.visible = true;
                bottom_right_line.visible = true;

                bottom_left_line.width = (percent - 66) * ((angel_pic.width / 2) / 34);
                bottom_right_line.width = (percent - 66) * ((angel_pic.width / 2) / 34);
            }
        }
    }
}

function loadComplete(event:Event):void
{
    var num:int = numChildren;

    while (num--)
    {
        removeChildAt(num);
    }   

    addChild(loader);
}

function onPreloaderResize(event:Event):void
{
    var preloaderPadding:Number = (stage.stageWidth / 1000) * 35;

    angel_pic.x = (stage.stageWidth / 2) - (angel_pic.width / 2);
    angel_pic.y = (stage.stageHeight / 2) - (angel_pic.height / 2);

    angel_pic.width = stage.stageWidth - (preloaderPadding * 2);
    angel_pic.height = angel_pic.width / 4.9;

    top_left_line.x = stage.stageWidth / 2;
    top_left_line.y = angel_pic.y;

    top_right_line.x = stage.stageWidth / 2;
    top_right_line.y = angel_pic.y;

    side_left_line.x = preloaderPadding + side_left_line.width;
    side_left_line.y = angel_pic.y;

    side_right_line.x = preloaderPadding + angel_pic.width;
    side_right_line.y = angel_pic.y;

    bottom_left_line.x = preloaderPadding + bottom_left_line.height;
    bottom_left_line.y = angel_pic.y + angel_pic.height;

    bottom_right_line.x = preloaderPadding + angel_pic.width;
    bottom_right_line.y = angel_pic.y + angel_pic.height;
}

function onPreloaderEnter(event:Event):void
{
    var preloaderPadding:Number = (stage.stageWidth / 1000) * 35;

    angel_pic.x = (stage.stageWidth / 2) - (angel_pic.width / 2);
    angel_pic.y = (stage.stageHeight / 2) - (angel_pic.height / 2);

    angel_pic.width = stage.stageWidth - (preloaderPadding * 2);
    angel_pic.height = angel_pic.width / 4.9;

    top_left_line.x = stage.stageWidth / 2;
    top_left_line.y = angel_pic.y;

    top_right_line.x = stage.stageWidth / 2;
    top_right_line.y = angel_pic.y;

    side_left_line.x = preloaderPadding + side_left_line.width;
    side_left_line.y = angel_pic.y;

    side_right_line.x = preloaderPadding + angel_pic.width;
    side_right_line.y = angel_pic.y;

    bottom_left_line.x = preloaderPadding + bottom_left_line.height;
    bottom_left_line.y = angel_pic.y + angel_pic.height;

    bottom_right_line.x = preloaderPadding + angel_pic.width;
    bottom_right_line.y = angel_pic.y + angel_pic.height;
}

I have experienced preloader problems as well before.

Though it still might be something wrong in your code, there might be another known issue you might want to exclude as the source of your problem.

If you experience the problem only on your production server and not locally on your pc, there is a good chance that your server setup might be the culprit.

Check my blogpost about server gzip compression of compressed binary files. Though it is a post about flex, the principle is the same and should apply to flash as well.

Cheers

Before uploading the site to the GoDaddy server, I used to test it using Flash's own "Simulate Download" option and never had I experienced any problem whatsoever.

Only once I uploaded the site, I started experiencing this problem.

The strange thing that I can't manage to understand and solve is that only when the preloader has froze/hung and the site is refreshed, or the cache is cleared, will the entire site work perfectly as supposed to with no glitches or lock-ups!

I even uploaded a simpler version of the preloader (as shown in the code below) that loads a 3Mb SWF file containing a single picture in it, and still the same problem is present once again. But I don't think there is a problem in the code, am I right?

var req:URLRequest = new URLRequest("main-mini.swf");
var loader:Loader = new Loader();
loader.load(req);

loader.contentLoaderInfo.addEventListener(Event.OPEN, showPreloader);
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, showProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, showContent);

var preloader:Preloader = new Preloader();

function showPreloader(event:Event):void {
    addChild(preloader);
    preloader.x = (stage.stageWidth / 2) - (preloader.width / 2);
    preloader.y = (stage.stageHeight / 2) - (preloader.height / 2);
}

function showProgress(event:ProgressEvent):void {
    var percent:Number = event.bytesLoaded / event.bytesTotal;
    preloader.percentage.text = Math.round(percent * 100) + "%";
    preloader.bar.width = 300 * percent;
}

function showContent(event:Event):void {
    removeChild(preloader);
    addChild(loader);
}

I tried also using a cache-busting technique in both the HTML and Flash, and reducing its frame rate from 31fps to 21fps but all was for nothing.

I might be asking something stupid, but could it be something from the GoDaddy server? Could there be some setting I should adjust for it to work properly or maybe I could have uploaded it "badly"? I uploaded the site through Dreamweaver using the FTP method. I don't know what to think of at this point...

If anyone could enlighten me as to how I may solve this problem of mine, I would be tremendously grateful, because all works fine locally - once it is uploaded, the problem presents itself.

Thanks.