Help Me To Fix This Loading Please

Question

Dear All Users
I really need your help on this, I have a loader in my edge animate that i picked up from http://www.gayadesign.com/diy/queryloader-preload-your-website-in-styl e/
and this is the Only loader that works very well on Edge and Load anything Completely, loader had some bugs so i google it and find fixes for, and now i have this loader without any bug except One bug that loader has with Maxthon, IE, Chrome and Safari browsers, i'm going Crazy right Now and dont know what to do with this Bug, The bug is only at last seconds of loading, after load complete a symbol that created in the loading Script wont remove !!
if you try this on any edge Project you will see after loading is complete you just see a 0% in a black screen but if you zoom out your Browser you will see your project is there...
and the point is this is happen only with Maxthon, IE, Chrome and Safari, and works very well with FireFox ... !!!
i really need this loading, Here is the Final Script and CSS file that Loader Needs :
CSS File Link : http://www.mediafire.com/?kb11s474aipt39w
Script :
var QueryLoader = {
        overlay: "",
        loadBar: "",
        preloader: "",
        items: new Array(),
        doneStatus: 0,
        doneNow: 0,
        selectorPreload: "body",
        ieLoadFixTime: 2000,
        ieTimeout: "",
        init: function() {
                if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
                        //break if IE6                
                        return false;
                if (QueryLoader.selectorPreload == "body") {
                        QueryLoader.spawnLoader();
                        QueryLoader.getImages(QueryLoader.selectorPreload);
                        QueryLoader.createPreloading();
                } else {
                        $(document).ready(function() {
                                QueryLoader.spawnLoader();
                                QueryLoader.getImages(QueryLoader.selectorPreload);
                                QueryLoader.createPreloading();
                //help IE drown if it is trying to die
                QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
        ieLoadFix: function() {
                if(jQuery.browser.msie){
                        if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
                                QueryLoader.imgCallback();
                                QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
        imgCallback: function() {
                QueryLoader.doneNow ++;
                QueryLoader.animateLoader();
        getImages: function(selector) {
                var everything = $(selector).find("*:not(script)").each(function() {
                        var url = "";
                        if ($(this).css("background-image") != "none") {
                                var url = $(this).css("background-image");
                        } else if (typeof($(this).attr("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img") {
                                var url = $(this).attr("src");
                        url = url.replace("url(\"", "");
                        url = url.replace("url(", "");
                        url = url.replace("\")", "");
                        url = url.replace(")", "");
                        if (url.length > 0) {
                                QueryLoader.items.push(url);
        createPreloading: function() {
                QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
                $(QueryLoader.preloader).css({
                        height:         "0px",
                        width:          "0px",
                        overflow:       "hidden"
                var length = QueryLoader.items.length;
                QueryLoader.doneStatus = length;
                for (var i = 0; i < length; i++) {
                        var imgLoad = $("<img></img>");
                        $(imgLoad).attr("src", QueryLoader.items[i]);
                        $(imgLoad).unbind("load");
                        $(imgLoad).one('load', function() {             //IE Cache Fix  
                          QueryLoader.imgCallback();
                        }).each(function() {
                          if(this.complete) $(this).load();
                        $(imgLoad).appendTo($(QueryLoader.preloader));
        spawnLoader: function() {
                if (QueryLoader.selectorPreload == "body") {
                        var height = $(window).height();
                        var width = $(window).width();
                        var position = "fixed";
                } else {
                        var height = $(QueryLoader.selectorPreload).outerHeight();
                        var width = $(QueryLoader.selectorPreload).outerWidth();
                        var position = "absolute";
                var left = $(QueryLoader.selectorPreload).offset()['left'];
                var top = $(QueryLoader.selectorPreload).offset()['top'];
                QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
                $(QueryLoader.overlay).addClass("QOverlay");
                $(QueryLoader.overlay).css({
                        position: position,
                        top: top,
                        left: left,
                        width: width + "px",
                        height: height + "px"
                QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
                $(QueryLoader.loadBar).addClass("QLoader");
                $(QueryLoader.loadBar).css({
                        position: "relative",
                        top: "50%",
                        width: "0%"
                QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));
                $(QueryLoader.loadAmt).addClass("QAmt");
                $(QueryLoader.loadAmt).css({
                        position: "relative",
                        top: "50%",
                        left: "50%"
        animateLoader: function() {
                var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
                if (perc > 99) {
                        $(QueryLoader.loadAmt).html("100%");
                        $(QueryLoader.loadBar).stop().animate({
                                width: perc + "%"
                        }, 500, "linear", function() {
                                QueryLoader.doneLoad();
                } else {
                        $(QueryLoader.loadBar).stop().animate({
                                width: perc + "%"
                        }, 500, "linear", function() { });
                        $(QueryLoader.loadAmt).html(Math.floor(perc)+"%");
        doneLoad: function() {
                //prevent IE from calling the fix
                clearTimeout(QueryLoader.ieTimeout);
                //determine the height of the preloader for the effect
                if (QueryLoader.selectorPreload == "body") {
                        var height = $(window).height();
                } else {
                        var height = $(QueryLoader.selectorPreload).outerHeight();
                //The end animation, adjust to your likings
                $(QueryLoader.loadAmt).hide();
                $(QueryLoader.loadBar).animate({
                        height: height + "px",
                        top: 0
                }, 500, "linear", function() {
                        $(QueryLoader.overlay).fadeOut(800);
                        $(QueryLoader.preloader).remove();
yepnope({nope:[
                                                  'queryLoader.css',
                                                  ],complete: initialize});
function initialize (){
                                                  QueryLoader.init();
Note : when  you are in the Edge and hit ctrl+enter the project loads very well in IE, Chrome, and Safari without any problems !!  but when save and run HTML file the problem would appear !!
but if you run that HTML file in Firefox everything works like a charm...
i really don't know what can i do, i used all of my knowledge that i had in java Programming but no luck :'(
Please Help Me...
Note : you have to use this code inside of Preloader > Loading
& place CSS file in the main folder of your Edge Project
Zaxist

Answer 1

Hello Zaxist,
I must say this script is driving me nuts since the beginning.
How hard can it be for a (simple) percentage preloader to use on our (Edge Animate) website?
It was all so easy in Flash. A different story now.
I can see when pasting the code below (or yours) in the Preloader "loading" event, the code gets triggered 3 times.
So it seems it works (in Chrome) but 2 of the 3 loading overlays (+loadbar and text) won't remove like it should.
I don't have a solution for this either, but maybe someone with much more javascript experience can help us out with this one?
The nicest thing would be if the Adobe Edge Animate team provide us something simple we can put in the Preloader "loading" event like:
sym.$("ldr_txt").html(e.loaded+"%");
or maybe the use of (e.bytesloaded) and (e.bytestotal)?
Wouldn't that be great? Maybe they are working on this?
I really hope we finally can get a proper solution for this.
An animated gif (as we have now) is simply not enough.
Kind Regards,
Lester.
The below code is almost the same of yours, without the CSS.
var QueryLoader = {
          overlay: "",
          loadBar: "",
          preloader: "",
          items: new Array(),
          doneStatus: 0,
          doneNow: 0,
          selectorPreload: "body",
          ieLoadFixTime: 10,
          ieTimeout: "",
          init: function() {
                               if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {
                                                            //break if IE6                
                                                            return false;
                               QueryLoader.spawnLoader();
                               QueryLoader.getImages(QueryLoader.selectorPreload);
                               QueryLoader.createPreloading();
                               //help IE drown if it is trying to die
                               QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
                               console.log("INIT")
          ieLoadFix: function() {
                               if(jQuery.browser.msie){
                                                            if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
                                                                                  QueryLoader.imgCallback();
                                                                                  QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
          imgCallback: function() {
                               QueryLoader.doneNow ++;
                               QueryLoader.animateLoader();
          getImages: function(selector) {
                               var everything = $(selector).find("*:not(script)").each(function() {
                                                            var url = "";
                                                            if ($(this).css("background-image") != "none") {
                                                                                  var url = $(this).css("background-image");
                                                            } else if (typeof($(this).attr("src")) != "undefined" && $(this).prop("tagName").toLowerCase() == "img") {
                                                                                  var url = $(this).attr("src");
                                                            url = url.replace("url(\"", "");
                                                            url = url.replace("url(", "");
                                                            url = url.replace("\")", "");
                                                            url = url.replace(")", "");
                                                            if (url.length > 0) {
                                                                                  QueryLoader.items.push(url);
          createPreloading: function() {
                               QueryLoader.preloader = $("<div></div>").appendTo(QueryLoader.selectorPreload);
                               $(QueryLoader.preloader).css({
                                                            height:         "0px",
                                                            width:          "0px",
                                                            overflow:       "hidden"
                               var length = QueryLoader.items.length;
                               QueryLoader.doneStatus = length;
                               for (var i = 0; i < length; i++) {
                                        (function(i) {
                                                            var imgLoad = $("<img></img>");
                                                            $(imgLoad).attr("src", QueryLoader.items[i]);
                                                            $(imgLoad).unbind("load");
                                                            $(imgLoad).one('load', function() {             //IE Cache Fix  
                                                              QueryLoader.imgCallback();
                                                            }).each(function() {
                                                              if(this.complete) $(this).load();
                                                            $(imgLoad).appendTo($(QueryLoader.preloader));
                                                              })(i);
          spawnLoader: function() {
                               var height = $(window).height();
                               var width = $(window).width();
                               var position = "fixed";
                               var left = $(QueryLoader.selectorPreload).offset()['left'];
                               var top = $(QueryLoader.selectorPreload).offset()['top'];
                               QueryLoader.overlay = $("<div></div>").appendTo($(QueryLoader.selectorPreload));
                               $(QueryLoader.overlay).css({
                                                            "background-color":"#000",
                                                            "z-index":"9999",
                                                            position: position,
                                                            top: top,
                                                            left: left,
                                                            width: width + "px",
                                                            height: height + "px"
                               QueryLoader.loadBar = $("<div></div>").appendTo($(QueryLoader.overlay));
                               $(QueryLoader.loadBar).css({
                                                            "background-color":"#ccc",
                                                            height:"6px",
                                                            position: "relative",
                                                            top: "50%",
                                                            left: "0%",
                                                            width: "0%"
                               QueryLoader.loadAmt = $("<div>0%</div>").appendTo($(QueryLoader.overlay));
                               $(QueryLoader.loadAmt).css({
                                        color:"#666",
                                        "font-family":"'Trebuchet MS',Arial,Helvetica,sans-serif",
                                        "font-size":"24px",
                                        "font-weight":"700",
                                        "line-height":"50px",
                                        height:"50px",
                                        width:"100px",
                                        margin:"-60px 0 0 -50px",
                                                            position: "relative",
                                                            top: "50%",
                                                            left: "52%"
                               //console.log("SPAWNLOADER")
          animateLoader: function() {
                               var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;
                               if (perc > 99) {
                                                            $(QueryLoader.loadAmt).html("100%");
                                                            $(QueryLoader.loadBar).stop().animate({
                                                                                  width: perc + "%"
                                                            }, 500, "linear", function() {
                                                                                  QueryLoader.doneLoad();
                               } else {
                                                            $(QueryLoader.loadBar).stop().animate({
                                                                                  width: perc + "%"
                                                            }, 500, "linear", function() { });
                                                            $(QueryLoader.loadAmt).html(Math.floor(perc)+"%");
          doneLoad: function() {
                               //prevent IE from calling the fix
                               clearTimeout(QueryLoader.ieTimeout);
                               var height = $(window).height();
                              //The end animation, adjust to your likings
                               $(QueryLoader.loadAmt).hide();
                               $(QueryLoader.loadBar).animate({
                                                            //height: height + "px",
                                                            //top: "0%"
                               }, 500, "linear", function() {
                                                            $(QueryLoader.overlay).fadeOut(800);
                                                            $(QueryLoader.preloader).remove();
                                                            console.log("LOADED")                                         
QueryLoader.init();