8 Replies Latest reply on Jul 15, 2014 11:58 PM by joel_pau

    Controlling the load

    Xoco Level 3

      How I can (in which event) to control the loading of page elements (divs and elements created in design time) to display messages in the charge as "Loading section1", "Loading section 2", "Loading array of elements", "Loading section 3", "Loading images", etc.?


      Now, with animated .gif in preloader I can't show information about loading process.

      Is it possible to load or unload divs to free up memory and optimize loading and only load them when needed?


      Tx.

        • 1. Re: Controlling the load
          Xoco Level 3

          For example, can I display a message like "Loading fonts..." and after load fonts display "Fonts loaded" if I use Edge Web Fonts? how can I to control this?

          • 2. Re: Controlling the load
            Xoco Level 3

            What's difference between creationComplete and document.compositionReady events?

            • 3. Re: Controlling the load
              joel_pau Level 5

              Hi,

               

              So, what happens? Here are 2 files: loading Events.zip - Box


              1) The first file, without preloader, returns:

              consoleEdgeAnimateLoading.jpg


              2) The second file, with preloader, returns:

              consoleEdgeAnimateLoadingPreloader.jpg

               

              And a look at this page: http://api.jquery.com/category/events/document-loading/

              • 4. Re: Controlling the load
                Xoco Level 3

                But what elements created at design time are loaded into an event and another? My original question is how can I to inform the user that visit the web of the elements are loaded.


                edit: Well, with your answer now I know that I can use the creationComplete event of symbols (not used for me until now) to display messages on console, and now I know that all symbols (and all elements I suppose) are loaded before creationComplete of Stage (thanks for this info, it's cool). But, how I can do the same for divs, images, scripts (.js), or fonts that do not have the event creationComplete?


                Another problem, if document (stage) isn't loaded when symbols are loaded, then I can't display load messages in any textbox because stage is not loaded (and textbox is not visible), only I can show messages in console that is not helpful for my purpose.


                Sorry if the translation of Catalan to English with Google Translate does not understand exactly what I want.

                • 5. Re: Controlling the load
                  Xoco Level 3

                  Well, I will begin by controlling the loading of the images of the project (81 pictures, 1.29 MB). I do not assign any pictures at design time and then, in the event compositionReady, will begin to assign them by script (array of files names) with background css or attr instructions and show messages on screen as "Loading Images [1/81]."

                  The problem I have is that I don't know how "unassign" .jpg or .png files to the container div, I can't find a "none":

                  imatges.jpg

                  • 6. Re: Re: Controlling the load
                    joel_pau Level 5

                    You can use yepnope.

                    tutorial #1.

                    tutorial #2.

                     

                    You can try this ugly code:

                    yepnope.addPrefix('preload', function(resource){

                      resource.noexec = true;

                      return resource;

                    });

                     

                     

                    yepnope({

                      load: [

                      "preload!images/p2.jpg",

                      "preload!images/p3.jpg",

                      "preload!images/p4.jpg",

                      "preload!images/p5.jpg",

                      "preload!images/p6.jpg"

                      ],

                      complete: function() {

                      var message = sym.$("message"), loaded = 2, news="Loading 5 images: <br>";

                      $('img').each( function(i){

                      if (i>1){

                      $(this).hide();

                      $(this).attr('src', 'images/p'+i+'.jpg')

                      .load(function(){

                      if (this.complete) {

                      news += '>> image #'+i+' loaded.<br>';

                      loaded++;

                      if (loaded == $('img').length){news += "Loading completed."};

                      message.html(news);

                      $(this).fadeIn(3000);

                      }; //if complete

                      })//load

                      };//if i>0

                      });//each img

                      }//complete

                    });//yepnope

                     

                    1) Old school:

                    $('img').each( function(i){

                      if (i>1){

                      $(this).hide();

                      $(this).attr('src', 'images/p'+i+'.jpg')

                      .load(function(){

                      if (this.complete) {

                      news += '>> image #'+i+' loaded.<br>';

                      loaded++;

                      if (loaded == $('img').length){news += "Loading completed."};

                      message.html(news);

                      $(this).fadeIn(3000);

                      }; //if complete

                      })//load

                      };//if i>0

                      });//each img

                    2) one yepnope:

                    yepnope.addPrefix('preload', function(resource){

                      resource.noexec = true;

                      return resource;

                    });

                     

                     

                    yepnope({

                      load: [

                      "preload!images/p2.jpg",

                      "preload!images/p3.jpg",

                      "preload!images/p4.jpg",

                      "preload!images/p5.jpg",

                      "preload!images/p6.jpg"

                      ],

                      complete: function() {

                      $('img').each( function(i){ if (i>1){ $(this).attr('src', 'images/p'+i+'.jpg) }; });//each img

                      }//complete

                    });//yepnope

                    1 person found this helpful
                    • 7. Re: Controlling the load
                      Xoco Level 3

                      Does this code also determines the load order of images? because now the preload image (intro.gif) isn't the first to load.

                      What determines the sequence of images actually? should not preload img the first images to load?

                      firefox.jpg

                      chrome.jpg

                      Even using your solution to modify the index.html file (best solution), the browser first try to load two images that are inside the div Edge, how can it be possible?


                      firefox.jpg

                      I deleted preloader in Edge and now, code in index.html is:


                      <body style="margin:0;padding:0;height:100%;">

                          <div id="container" style="margin:0;padding:0;height:100%;background: url(images/intro.gif) no-repeat center center;">

                              <div id="Stage" class="EDGE-67786006">

                              </div>

                          </div>

                      </body>

                       

                       


                      • 8. Re: Re: Controlling the load
                        joel_pau Level 5

                        Sure, Javascript is asynchronous. Loading images is random and parallel.

                        The opposite of parallel is sequential.

                        Yepnope provides you a sequential loading: http://yepnopejs.com/

                         

                        yepnope.addPrefix('preload', function(resource){

                          resource.noexec = true;

                          return resource;

                        });

                         

                        yepnope({

                          load: [

                          "preload!images/p2.jpg",

                          "preload!images/p3.jpg",

                          "preload!images/p4.jpg",

                          "preload!images/p5.jpg",

                          "preload!images/p6.jpg"

                          ],

                          callback: function(url,result,key){ console.log(url+" is preloading.", "Image #"+key) },

                          complete: function() { implement your images here or later }

                        });