27 Replies Latest reply on Mar 10, 2014 9:59 AM by Zaxist

    Help Me To Fix This Loading Please

    Zaxist Level 4

      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

        • 1. Re: Help Me To Fix This Loading Please
          Zaxist Level 4

          in IE Debugging it says :

           

          QueryLoader.ieLoadFix()

           

          SCRIPT5009: 'QueryLoader' is undefined

           

          Can't anyone Help me ?

          • 2. Re: Help Me To Fix This Loading Please
            Zaxist Level 4

            In Edge Preview ode it works excellent and IE Debugging found no bug but after run it out of edge Problems appear...

            • 3. Re: Help Me To Fix This Loading Please
              lester_dm Level 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();

              • 4. Re: Help Me To Fix This Loading Please
                Zaxist Level 4

                Hello lester

                 

                This Post was for 1 year ago !!!

                in that time i had a problem but i was able to fix it within two month later and i posted it in one of thread in this forum, but that one only could work with yepnope version 1.0 and it cant work with yepnope version 1.5 (that used in Adobe Edge Animate version 2.0.1 and above )

                 

                but there is some other loaders that works with latest version of Adobe Edge Animate !!

                 

                you can find those in here :

                http://www.codingjack.com/percentage_preloader/

                 

                with Eight Different CSS, and i used one of them in this site : http://games.bluelagooncruises.com/

                 

                you can see how it works

                 

                regards

                Zaxist

                • 5. Re: Help Me To Fix This Loading Please
                  Nilton Felicio Level 1

                  How do these http://www.codingjack.com/percentage_preloader/ integration with Adobe Edge Animate? Have to take preloder Adobe? I would love to use a percentage to preloder.

                  • 6. Re: Help Me To Fix This Loading Please
                    lester_dm Level 1

                    Hello Zaxist,

                     

                    Sorry I didn't notice the date of your post.


                    Anyway, I modified/updated that same (old) script a bit to put in the Preloader "loading" event inside the latest version of Adobe Edge Animate.
                    It seems to work for me now. Although I only used a preloader bar (but also based on percentage) instead of a textbox.

                     

                    I have tested this in Chrome, Firefox, Internet Explorer, Opera, Maxthon and Safari. Sorry not on mobile yet.

                    I thought I would share this to anyone who can use this.

                     

                    I am certainly going to check out the "Codingjack" example too. This will probably be a better solution.
                    Thnx for the quick response!

                     

                    Kind Regards,

                    Lester.

                     

                     

                    var ldr_bar = "";

                    var ldr = "";

                    var a_imgs = new Array();

                    var img_ldd = 0;

                    var ie_ld_fix_time = 10;

                    var ie_timeout = "";

                    var perc;

                    var i;

                    var img_ldr;

                    var a_imgs_l;

                     

                    function init() {

                              if (navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/) == "MSIE 6.0,6.0") {

                                        // BREAK IF IE6                

                                        return false;

                              }

                              add_ldr_bar();

                              get_imgs();

                              create_ldr();

                              // HELP IE DROWN IF IT IS TRYING TO DIE

                              ie_timeout = setTimeout(ie_ld_fix(), ie_ld_fix_time);

                    }

                    function ie_ld_fix() {

                              if(detect_ie()){

                                        if (100 / a_imgs_l * img_ldd < 100) {

                                                  img_ldd++;

                                                  anim_ldr_bar();

                                                  ie_timeout = setTimeout(ie_ld_fix(), ie_ld_fix_time);

                                        }

                              }

                    }

                    function detect_ie() {

                        var ua = window.navigator.userAgent;

                        var msie = ua.indexOf('MSIE');

                        var trident = ua.indexOf('Trident/');

                        if (msie > 0) {

                            // IE 10 OR OLDER => RETURN VERSION NUMBER

                            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);

                        }

                        if (trident > 0) {

                            // IE 11 (OR NEWER) => RETURN VERSION NUMBER

                            var rv = ua.indexOf('rv:');

                            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);

                        }

                        // OTHER BROWSER

                        return false;

                    }

                    function get_imgs() {

                              var everything = $("body").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) {

                                                  a_imgs.push(url);

                                        }

                                        a_imgs_l = a_imgs.length;

                              });

                    }

                    function create_ldr() {

                              ldr = $("<div></div>").appendTo("body");

                              $(ldr).css({ height: "0px", width: "0px", overflow: "hidden" });

                              $(ldr).addClass('ldr');

                              for (i = 0; i < a_imgs_l; i++) {

                                        (function(i) {

                                                  img_ldr = $("<img></img>");

                                                  $(img_ldr).attr("src", a_imgs[i]);

                                                  $(img_ldr).unbind("load");

                                                  $(img_ldr).one('load', function() { 

                                                            //IE Cache Fix  

                                                            img_ldd++;

                                                            anim_ldr_bar();

                                                  }).each(function() {

                                                    if(this.complete) $(this).load();

                                                  });

                                                  $(img_ldr).appendTo($(ldr));

                                        })(i);

                              }

                    }

                    function add_ldr_bar() {

                              ldr_bar = $("<div></div>").appendTo($("body"));

                              $(ldr_bar).css({ "background-color":"#ffcc00", height:"2px", position: "fixed", top: 0          });

                              $(ldr_bar).addClass('ldr_bar');

                    }

                    function anim_ldr_bar() {

                              perc = 100 / a_imgs_l * img_ldd;

                              //console.log(perc+"%")

                              if (perc > 99) {

                                        $(ldr_bar).stop().animate({

                                                  width: perc + "%"

                                        }, 500, "linear", function() {

                                                  on_complete();

                                        });

                              } else {

                                        $(ldr_bar).stop().animate({

                                                  width: perc + "%"

                                        }, 500, "linear", function(){});

                              }

                    }

                    function on_complete() {

                              // PREVENT IE FROM CALLING THE FIX

                              clearTimeout(ie_timeout);

                              // ANIMATE LDR OUT & REMOVE

                              $(document.getElementsByClassName("ldr")).remove();

                              $(document.getElementsByClassName("ldr_bar")).fadeOut(800, function(){

                                        $(document.getElementsByClassName("ldr_bar")).remove();

                              });

                    }

                    //

                    init();

                    • 7. Re: Help Me To Fix This Loading Please
                      Zaxist Level 4

                      thanks for sharing your code

                      your code works like a charm

                       

                      Zaxist

                      • 8. Re: Help Me To Fix This Loading Please
                        iCurioso

                        Your script don't working (

                        • 9. Re: Help Me To Fix This Loading Please
                          iCurioso Level 1

                          This preloader don't working (

                          The percentage is always 100. The prelodaer.loading function is called 3 times. On the last call, the length of the array(a_imgs_l) is filled, but these pictures have all loaded. What to do to preloader earned?

                           

                          • 10. Re: Help Me To Fix This Loading Please
                            Zaxist Level 4

                            i had test this preloader, and this preloader works as it should without any problem

                             

                            can you send me your project so i can see why you have problem ? and i can help you with this

                             

                            regards

                            Zaxist

                            • 11. Re: Help Me To Fix This Loading Please
                              iCurioso Level 1

                              I can't send my project. Send your test project, please

                              • 12. Re: Help Me To Fix This Loading Please
                                iCurioso Level 1

                                Please, help

                                • 13. Re: Help Me To Fix This Loading Please
                                  iCurioso Level 1

                                  Create a project for yourself, put a few pictures on the size of 5mb. Originally uploaded pictures. Then shows this preloader. console.log (perc + "%") - shows the data after all uploaded images. What is the sense in this preloader then?

                                  • 14. Re: Help Me To Fix This Loading Please
                                    lester_dm Level 1

                                    iCurioso,

                                     

                                    I have set up a small example with 4 images. You can download the zipfile here.

                                    https://app.box.com/s/xprbjho980lfm8ykrfft
                                    In the document.compositionReady I also added an extra interval to show the content when the loaderbar has faded out entirely.

                                     

                                    Somehow I can not start the site from within the "on_complete()" in the loading event. I don't know how to target the timeline from there.

                                    Any suggestions to target the timeline from within the loading event would be great!

                                     

                                    But "document.compositionReady" is fired when all is loaded. So we can start from there.

                                    Now this works fine with me. When viewing Chrome's javascript console it displays 25%, 50%, 75%, 100% correctly.

                                    The script in the loading event only helps me to get the percentage loaded, the animation en the removal of the loaderbar.
                                    The "document.compositionReady" does the second part.

                                     

                                    I find this not the most perfect solution myself, but it works for now.

                                     

                                    Perhaps you can try what Zaxist suggests over here http://www.codingjack.com/percentage_preloader

                                    Give it a try it and post if you have any succes.

                                     

                                    Kind regards,

                                    Lester.

                                    1 person found this helpful
                                    • 15. Re: Help Me To Fix This Loading Please
                                      iCurioso Level 1

                                      Everything works the same way.


                                      Pictures loaded themselves. Once everything booted (and pictures too), shows preloader. Pictures already in the browser cache, so preloader shows data and quickly disappears. He does not show the real situation.

                                      • 16. Re: Help Me To Fix This Loading Please
                                        Zaxist Level 4

                                        Non of all Preloaders in the world Preload Cached files cause there is nothing to load

                                         

                                        so if you want to try it load everytime you shoud disable caching from your .htaccess file or every time open your link in new incognito windows mode

                                         

                                        regards

                                        Zaxist

                                        • 17. Re: Help Me To Fix This Loading Please
                                          Zaxist Level 4

                                          also Non of all Preloaders in the world works in local mode, you have to test it Online !!

                                           

                                          regards

                                          Zaxist

                                          • 18. Re: Help Me To Fix This Loading Please
                                            iCurioso Level 1

                                            Of course I look at the examples on the Internet.

                                            Open sites are loaded files and pictures. Then show preloader. Preloader should appear at the beginning, when downloading files, and not the end.

                                            • 19. Re: Help Me To Fix This Loading Please
                                              Zaxist Level 4

                                              well, i made a sample with percentage on the screen and big loading bar at center, here :

                                               

                                              http://zaxist.com/loading/

                                               

                                              Open it on Firefox or Chrome

                                               

                                              if you can see it works

                                               

                                              then your server have problem

                                               

                                              if you cant see it works

                                               

                                              then your OS have problem

                                               

                                              at the end this preloader wont work with IE

                                               

                                              regards

                                              Zaxist

                                              • 20. Re: Help Me To Fix This Loading Please
                                                Zaxist Level 4

                                                dont forget to try it on incognito for Chrome or private mode for firefox

                                                • 21. Re: Help Me To Fix This Loading Please
                                                  iCurioso Level 1

                                                  picture loaded before the preloader

                                                   

                                                  Using MacOS, win 8, win 7, iOS

                                                  • 22. Re: Help Me To Fix This Loading Please
                                                    Zaxist Level 4

                                                    i told you, if you cant see it works, then the problem is on your side

                                                     

                                                    regards

                                                    Zaxist

                                                    • 23. Re: Help Me To Fix This Loading Please
                                                      iCurioso Level 1

                                                      The problem is that at the beginning of the data loaded. And then shows preloader, no benefit from it in this case. Have to sit and look at a white screen until everything is loaded, then the preloader appears and quickly reaches 100%.

                                                      • 24. Re: Help Me To Fix This Loading Please
                                                        Zaxist Level 4

                                                        in my sample screen is not white, its black

                                                         

                                                        if you cant see its black at the first time, then the problem is on your side

                                                         

                                                        you can also ask your friends to test it for you

                                                         

                                                        regards

                                                        Zaxist

                                                        • 25. Re: Help Me To Fix This Loading Please
                                                          iCurioso Level 1

                                                          In your example - black screen)
                                                          Picture loaded faster than showing preloader. When showing preloader - there 100%.
                                                          Friends of the same.

                                                          • 26. Re: Help Me To Fix This Loading Please
                                                            Zaxist Level 4

                                                            i can do nothing for you, cause the problem is on your side, i can see it works correctly on my side without any problem

                                                             

                                                            regards

                                                            Zaxist

                                                            • 27. Re: Help Me To Fix This Loading Please
                                                              Zaxist Level 4

                                                              also your plan B can buying Preloader from here :  http://www.codingjack.com/percentage_preloader

                                                               

                                                              regards

                                                              Zaxist