when loading slides wait for any images to be obtained before initial…

…izing presentation

this fixes the occasional issue where an image is not centered correctly as it has not loaded
before the height of the slide is calculated

example/one/slidesA.md

@@ -11,3 +11,7 @@
 * a third thing
 * a fourth thing
 * a fifth thing
+
+!SLIDE center
+
+![octocat](octocat.png)

public/js/jquery.batchImageLoad.js

@@ -0,0 +1,56 @@
+/**
+ *  Plugin which is applied on a list of img objects and calls
+ *  the specified callback function, only when all of them are loaded (or errored).
+ *  @author:  H. Yankov (hristo.yankov at gmail dot com)
+ *  @version: 1.0.0 (Feb/22/2010)
+ *	http://yankov.us
+ */
+
+(function($) {
+$.fn.batchImageLoad = function(options) {
+	var images = $(this);
+	var originalTotalImagesCount = images.size();
+	var totalImagesCount = originalTotalImagesCount;
+	var elementsLoaded = 0;
+
+	// Init
+	$.fn.batchImageLoad.defaults = {
+		loadingCompleteCallback: null,
+		imageLoadedCallback: null
+	}
+  var opts = $.extend({}, $.fn.batchImageLoad.defaults, options);
+
+	// Start
+	images.each(function() {
+		// The image has already been loaded (cached)
+		if ($(this)[0].complete) {
+			totalImagesCount--;
+			if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+		// The image is loading, so attach the listener
+		} else {
+			$(this).load(function() {
+				elementsLoaded++;
+
+				if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+
+				// An image has been loaded
+				if (elementsLoaded >= totalImagesCount)
+					if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+			});
+			$(this).error(function() {
+				elementsLoaded++;
+
+				if (opts.imageLoadedCallback) opts.imageLoadedCallback(elementsLoaded, originalTotalImagesCount);
+
+				// The image has errored
+				if (elementsLoaded >= totalImagesCount)
+					if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+			});
+		}
+	});
+
+	// There are no unloaded images
+	if (totalImagesCount <= 0)
+		if (opts.loadingCompleteCallback) opts.loadingCompleteCallback();
+};
+})(jQuery);

public/js/showoff.js

@@ -32,35 +32,41 @@ function setupPreso() {
 }
 
 function loadSlides() {
-  //load through #slides offscreen and copy back into #preso when prepared
+  //load slides offscreen, wait for images and then initialize
   $("#slides").load("/slides", false, function(){
-    //center
-    centerSlides($('#slides > .slide'))
-
-    //copy into presentation area
-    $("#preso").empty()
-    $('#slides > .slide').appendTo($("#preso"))
-
-    //populate vars
-    slides = $('#preso > .slide')
-    slideTotal = slides.size()
-
-    //setup jquery cycle with default show/hide transition
-    $('#preso').cycle({
-      fx: 'none',
-      timeout: 0
-    });
-
-    setupMenu()
-    if (slidesLoaded) {
-      showSlide()
-      alert('slides loaded')
-    } else {
-      showFirstSlide()
-      slidesLoaded = true
-    }
-    sh_highlightDocument('/js/sh_lang/', '.min.js')
+    $("#slides img").batchImageLoad({
+			loadingCompleteCallback: initializePresentation
+		})
+  })
+}
+
+function initializePresentation() {
+  //center slides offscreen
+  centerSlides($('#slides > .slide'))
+
+  //copy into presentation area
+  $("#preso").empty()
+  $('#slides > .slide').appendTo($("#preso"))
+
+  //populate vars
+  slides = $('#preso > .slide')
+  slideTotal = slides.size()
+
+  //setup jquery cycle with default show/hide transition
+  $('#preso').cycle({
+    fx: 'none',
+    timeout: 0
   })
+
+  setupMenu()
+  if (slidesLoaded) {
+    showSlide()
+    alert('slides loaded')
+  } else {
+    showFirstSlide()
+    slidesLoaded = true
+  }
+  sh_highlightDocument('/js/sh_lang/', '.min.js')
 }
 
 function centerSlides(slides) {

views/index.erb

@@ -12,6 +12,7 @@
 
 	<script type="text/javascript" src="/js/jquery-1.4.min.js"></script>
 	<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
+	<script type="text/javascript" src="/js/jquery.batchImageLoad.js"></script>
 	<script type="text/javascript" src="/js/jquery-print.js"></script>	
   <script type="text/javascript" src="/js/fg.menu.js"></script> 
 	<script type="text/javascript" src="/js/showoff.js"></script>