4 Replies Latest reply on Aug 23, 2016 8:56 AM by ClayUUID

    html5 canvas - not all images displaying after preloading

    horuscat

      i'm hoping someone will have a quick and easy solution to this...

       

      i've got quite a large html5 canvas composition...

      large enough, that we've added a progress bar to the preloader...

       

      Rubi Ate the Fig | Middle-Eastern Infused Mystic Rock

       

      the problem i'm having, at least for me on slower bandwidth (takes a couple minutes to load), is this...

      once the content preloads, the preloader 'hides', and then the initial version of the canvas that appears is missing two of the main background and page graphics...

      if you refresh your browser, everything pops right into place.

      the images have obviously been loaded, but just haven't been included in that initial display for some reason... they missed their 'window' somehow...

      there's something about that initial load, when there's nothing in the browser's image cache so far...

      once the canvas's images are cached the first time, you can return to the homepage over and over and not have that issue again.

      i'm on a macbook pro, and have had the same thing happen in chrome, firefox and safari...

      not sure if this happens on broadband connections where the page loads much faster...

       

      i'd prefer a way to refresh the canvas before it appears after preloading, rather than refreshing the whole browser window...

      or....  whatever solution works the best! i'm definitely not a coder....  ;-)

       

      RubiNoLoad.jpg

       

      RubiLoad.jpg

       

      any ideas/help/suggestions would be greatly appreciated! we're in soft launch and i'd love to get this resolved asap!

      thanks in advance!

      craig

        • 1. Re: html5 canvas - not all images displaying after preloading
          kglad Adobe Community Professional & MVP

          i don't see a problem (on broadband), but you could force a page refresh by using the reload() method.

          1 person found this helpful
          • 2. Re: html5 canvas - not all images displaying after preloading
            horuscat Level 1

            hi there!

            i appreciate the response!

            glad to hear the site loaded properly on your broadband...

            but, i also was sent a couple screenshots of a brand new windows laptop that did a similar thing, images not appearing initially...

            so i need to do a refresh...

             

            if i'm doing a page refresh with the reload() method, is this the best javascript to use? window.location.reload();

            also where in my canvas html do i put it to work?

            i'm sure, pretty basic, but i've tried it at the end of the handleComplete event, and that just created an infinite page refresh.. haha...

            also tried it in the page body after the preloader div's, but that one didn't refresh at all...

             

            thanks for the help!

             

            i'm assuming, since you didn't mention it, there's no way to refresh/reload the canvas within the page, after it loads initially, but before the preloader disappears? essentially repeat the load twice?

             

            forgive my ignorance and thanks again!

            craig

             

             

            here's my page html below for quick reference:

             

            <!DOCTYPE html>

            <html>

            <head>

            <meta charset="UTF-8">

            <meta name="authoring-tool" content="Adobe_Animate_CC">

            <title>Rubi Ate the Fig | Middle-Eastern Infused Mystic Rock</title>

            <style>

              body {

              overflow:hidden;

              }

              #canvas {

              position:absolute;

              margin:auto;

              left:-100%;right:-100%;

              top:-100%;bottom:-100%;

              }

              #preload { 

                    position: absolute;

              background-image: url("images/preloader.gif");

                    background-repeat: no-repeat;  

                    margin:auto;

              left:-100%;right:-100%;

              top:-100%;bottom:-100%;

              width: 200px; 

                    height: 225px;

              z-index:100; 

                } 

                 

                #preloadFill {

              margin-top:215px; 

                    position: absolute; 

                    background-color:#2f5668;

              border-right: 3px solid rgba(255, 255, 255, .2);

              border-left: 3px solid rgba(255, 255, 255, .2); 

                    height: 9px; 

                    width: 0;

              z-index:100; 

                } 

             

             

            </style>

            <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>

            <script src="rubi-desert-portal66h.js?1471887722823"></script>

            <script>

            var canvas, stage, exportRoot;

            function init() {

              canvas = document.getElementById("canvas");

              createjs.MotionGuidePlugin.install();

              images = images||{};

              var loader = new createjs.LoadQueue(false);

              loader.setMaxConnections(6);

              loader.installPlugin(createjs.Sound);

              loader.addEventListener("fileload", handleFileLoad);

              loader.addEventListener("complete", handleComplete);

              loader.addEventListener("progress", handleProgress);

              loader.loadManifest(lib.properties.manifest);

            }

            function handleFileLoad(evt) {

              if (evt.item.type == "image") { images[evt.item.id] = evt.result; }

            }

            function handleComplete(evt) {

              //This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.

              var queue = evt.target;

              var ssMetadata = lib.ssMetadata;

              for(i=0; i<ssMetadata.length; i++) {

              ss[ssMetadata[i].name] = new createjs.SpriteSheet( {"images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames} )

              }

              exportRoot = new lib.rubidesertportal66h();

              stage = new createjs.Stage(canvas);

              stage.addChild(exportRoot);

              stage.enableMouseOver();

              //Registers the "tick" event listener.

              createjs.Ticker.setFPS(lib.properties.fps);

              createjs.Ticker.addEventListener("tick", stage);   

              //Code to support hidpi screens and responsive scaling.

              (function(isResp, respDim, isScale, scaleType) {

              var lastW, lastH, lastS=1;

              window.addEventListener('resize', resizeCanvas);

              resizeCanvas();

              function resizeCanvas() {

              var w = lib.properties.width, h = lib.properties.height;

              var iw = window.innerWidth, ih=window.innerHeight;

              var pRatio = window.devicePixelRatio, xRatio=iw/w, yRatio=ih/h, sRatio=1;

              if(isResp) {               

              if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {                   

              sRatio = lastS;               

              }

              else if(!isScale) {

              if(iw<w || ih<h)

              sRatio = Math.min(xRatio, yRatio);

              }

              else if(scaleType==1) {

              sRatio = Math.min(xRatio, yRatio);

              }

              else if(scaleType==2) {

              sRatio = Math.max(xRatio, yRatio);

              }

              }

              canvas.width = w*pRatio*sRatio;

              canvas.height = h*pRatio*sRatio;

              canvas.style.width = w*sRatio+'px';

              canvas.style.height = h*sRatio+'px';

              stage.scaleX = pRatio*sRatio;

              stage.scaleY = pRatio*sRatio;

              lastW = iw; lastH = ih; lastS = sRatio;

              }

              })(true,'both',true,2);

              document.getElementById("preload").style.visibility = "hidden";

            }

            function playSound(id, loop) {

              return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);

            }

            function handleProgress(evt) { 

                document.getElementById("preloadFill").style.width = Math.round(evt.progress * 100) + "%"; 

            }

            </script>

            </head>

            <body onload="init();" style="margin:0px;">

              <canvas id="canvas" width="1920" height="1080" style="display: block; background-color:rgba(0, 0, 0, 1.00)"></canvas>

              <div id="preload"><div id="preloadFill"></div></div>

            </body>

            </html>

            • 3. Re: html5 canvas - not all images displaying after preloading
              kglad Adobe Community Professional & MVP

              yes, that code will work.

               

              you can just add that to an animate pro script panel and it will force the reload of your page.  however, if you're not careful your page will repeately reload and you don't want that.

               

              so, start a timer when your app starts.  if loading completes in less than say 10 seconds, do NOT execute window.location.refresh().  otherwise, do so.

              1 person found this helpful
              • 4. Re: html5 canvas - not all images displaying after preloading
                ClayUUID Adobe Community Professional

                A simple timer is no guarantee that the page won't get stuck in an infinite reload loop, what with all the varying cache strategies and settings in the wild.

                 

                Instead, perhaps something like this would work:

                 

                var marker = "reloaded";
                if (location.hash != "#" + marker) {
                    location.hash = marker;
                    location.reload(false);
                }
                else {
                    // remove hash from URL so it can't get bookmarked
                    try {
                        history.replaceState({}, document.title, location.href.slice(0, -1 - marker.length));
                    }
                    catch(e) {
                        location.hash = "";
                    }
                }
                
                1 person found this helpful