title: Javascript game loads slow
body: <p>I am trying to create a puzzle game with javascript. I am grabbing an image for the puzzle from a url and loading it into the main div. But when I load the webpage it takes a second until everything loads correctly. How can I get this to look smoother?</p>
  
  <p>Thanks</p>
  
  <p>My webpage with the bug at start up:</p>
  
  <p><a href="http://www.acsu.buffalo.edu/~jamesber/GameOne.html#" rel="nofollow">http://www.acsu.buffalo.edu/~jamesber/GameOne.html#</a></p>
  
  <p>My code:</p>
  
  <pre><code> $(function (){
  
   var plant = "";
  
  $.ajax({"url":"http://beta.botanicalapp.com/api/v1/plants/?photo=true"})
  .success(function(fullData){
          plant = fullData[2].plant.image_default.url;
  
          $("#puzzle div").css({'background-image':'url('+ plant +')'});
          $("#helper").attr("src",plant);
          var puzzle = $("#puzzle");
          var pieces = $("#puzzle div");
  
              pieces.sort(function (a, b) {
                  var temp = parseInt(Math.random() * 100);
                  var isOddOrEven = temp % 2;
                  var isPosOrNeg = temp &gt; 5 ? 1 : -1;
                  return (isOddOrEven * isPosOrNeg);
              }).appendTo(puzzle);
  
          var timer;
          var secs = 0;
          var mins = 0;
          var millsecs = 0;
          var timeString = document.getElementById("time");
          timeString.innerHTML = "00:00:00";
  
          function update(){
              if(millsecs == 100) {
                  secs++;
                  millsecs = 0;
                  if(secs == 60){
                      mins++;
                      secs = 0;
                  }
              } 
              else {
                  millsecs++;
              }
              if((millsecs&lt;10) &amp;&amp; (secs&lt;10) &amp;&amp; (mins&lt;10)) {
          timeString.innerHTML = '0' + mins + ':0' + secs + ':0' + millsecs;
              }
              else if ((millsecs&lt;10) &amp;&amp; (secs&lt;10)) {
          timeString.innerHTML = mins + ':0' + secs + ':0' + millsecs;
              }
              else if ((millsecs&lt;10) &amp;&amp; (mins&lt;10)) {
          timeString.innerHTML = '0' + mins + ':' + secs + ':0' + millsecs;
              }
              else if((secs&lt;10) &amp;&amp; (mins&lt;10)){
          timeString.innerHTML = '0' + mins + ':0' + secs + ':' + millsecs;
              } 
              else if (millsecs&lt;10) {
              timeString.innerHTML = mins + ':' + secs + ':0' + millsecs;
              }
              else if (secs&lt;10){
              timeString.innerHTML = mins + ':0' + secs + ':' + millsecs;
              } 
              else if (mins&lt;10) {
          timeString.innerHTML = '0' + mins + ':' + secs + ':' + millsecs;
              } 
              else {
              timeString.innerHTML = mins + ':' + secs + ':' + millsecs;
              }   
          }
  
          function start(){
              timer = setInterval(function() {update()}, 10);
          }
  
          start();    
          initSwap();
  
          function initSwap() {
              initDroppable($("#puzzle div"));
              initDraggable($("#puzzle div"));
          }
  
  
          function initDraggable($elements) {
              $elements.draggable({
                  appendTo: "body",
                  helper: "clone",
                  cursor: "move",
                  revert: "invalid"
              });
          }
  
          $("#final").dialog({
              autoOpen: false,
              modal: true,
              width: 900,
              resizable: false,
              height: 520,
              position: [250,75],
              dialogClass: "fixed-dialog",
              draggable: false
          });
  
          function initDroppable($elements) {
              $elements.droppable({
                  activeClass: "ui-state-default",
                  hoverClass: "ui-drop-hover",
                  accept: ":not(.ui-sortable-helper)",
                  over: function (event, ui) {
                      var $this = $(this);
                  },
                  drop: function (event, ui) {
                      var $this = $(this);
                      var linew1 = $(this).after(ui.draggable.clone());
                      var linew2 = $(ui.draggable).after($(this).clone());
                      $(ui.draggable).remove();
                      $(this).remove();
                      initSwap();
                      var finished = "1,2,3,4,5,6,7,8,9";
                      var started = '';
                      $("#puzzle div").each(function(){
                          var image = $(this).attr("id");
                  started += image.replace("recordArr_","")+",";
                          });
                  started = started.substr(0(started.length)-1);
                          if(started == finished){
                              clearTimeout(timer);
                      $("#thePlant").attr("src",plant);
                              $("#final").dialog("open");
                          }
                  }
              });
          }
  });
   });
  </code></pre>