wait for images to load in burn

hugeinc · Apr 4, 2012 · 5b0a958 · 5b0a958
1 parent 235d2c8
commit 5b0a958
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 24 deletions.
diff --git a/build/javascripts/burn.js b/build/javascripts/burn.js
@@ -384,17 +384,20 @@ o.$LAB=J();
     }
     $(":visible").each(function(){ tryadd(this, true); });
     $(":visible").each(function(){ tryadd(this, false); });
-    console.log($els.length);
+    console.log("burning "+$els.length+" elements on the page");
     $els.append(htmlTemplate);
-    $(".huge-bookmarklet-burn").each(function(){
-      var $this = $(this);
-      var $parent = $this.parent();
-      $this.animate({height: $parent.outerHeight()-minHeight}, 2000); 
-    });
-    $(".flamme2").each(function(){
-      var $this = $(this);
-      var $parent = $this.parent();
-      $this.animate({bottom: $parent.outerHeight()-minHeight}, 2000); 
+    $els.load(function(){
+      $("#huge-bookmarklet-loader").fadeOut(200);
+      $(".huge-bookmarklet-burn").each(function(){
+        var $this = $(this);
+        var $parent = $this.parent();
+        $this.animate({height: $parent.outerHeight()-minHeight}, 2000); 
+      });
+      $(".flamme2").each(function(){
+        var $this = $(this);
+        var $parent = $this.parent();
+        $this.animate({bottom: $parent.outerHeight()-minHeight}, 2000); 
+      });
     });
   }
 
@@ -404,7 +407,6 @@ o.$LAB=J();
   $LAB
   .script("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
   .wait(function(){
-    $("#huge-bookmarklet-loader").fadeOut(200);
     burn();
   });
 })();
diff --git a/build/stylesheets/burn.css b/build/stylesheets/burn.css
@@ -17,6 +17,6 @@
 
 .burn-bookmarklet.huge-bookmarklet-burn {
   bottom: 0 !important;
-  background: url("../images/burned_paper.png") !important;
+  background: #9d7950 url("../images/burned_paper.png") !important;
   opacity: 0.7 !important;
   padding: 0 !important; }
diff --git a/source/javascripts/burn.js b/source/javascripts/burn.js
@@ -383,17 +383,23 @@ o.$LAB=J();
     }
     $(":visible").each(function(){ tryadd(this, true); });
     $(":visible").each(function(){ tryadd(this, false); });
-    console.log($els.length);
+    var loaded = false;
+    console.log("burning "+$els.length+" elements on the page");
     $els.append(htmlTemplate);
-    $(".huge-bookmarklet-burn").each(function(){
-      var $this = $(this);
-      var $parent = $this.parent();
-      $this.animate({height: $parent.outerHeight()-minHeight}, 2000); 
-    });
-    $(".flamme2").each(function(){
-      var $this = $(this);
-      var $parent = $this.parent();
-      $this.animate({bottom: $parent.outerHeight()-minHeight}, 2000); 
+    var $cacheImgs = $("<div style='display:none'><img src='"+serverUrl+"images/flamme2.gif'/><img src='"+serverUrl+"images/burned_paper.png'/></div>");
+    $cacheImgs.find("img").load(function(){
+      console.log("images loaded");
+      $("#huge-bookmarklet-loader").fadeOut(200);
+      $(".huge-bookmarklet-burn").each(function(){
+        var $this = $(this);
+        var $parent = $this.parent();
+        $this.animate({height: $parent.outerHeight()-minHeight}, 2000); 
+      });
+      $(".flamme2").each(function(){
+        var $this = $(this);
+        var $parent = $this.parent();
+        $this.animate({bottom: $parent.outerHeight()-minHeight}, 2000); 
+      });
     });
   }
 
@@ -403,7 +409,6 @@ o.$LAB=J();
   $LAB
   .script("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js")
   .wait(function(){
-    $("#huge-bookmarklet-loader").fadeOut(200);
     burn();
   });
 })();
diff --git a/source/stylesheets/burn.css.scss b/source/stylesheets/burn.css.scss
@@ -17,7 +17,7 @@
 }
 .burn-bookmarklet.huge-bookmarklet-burn {
   bottom: 0 !important;
-  background: url('../images/burned_paper.png') !important;
+  background: #9D7950 url('../images/burned_paper.png') !important;
   opacity: 0.7 !important;
   padding: 0 !important;
 }