Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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
  • Loading branch information...
commit a92cf9226335995a1103fa06bce5eaf4ab057921 1 parent 94551d8
@krisb krisb authored
View
BIN  example/one/octocat.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
4 example/one/slidesA.md
@@ -11,3 +11,7 @@
* a third thing
* a fourth thing
* a fifth thing
+
+!SLIDE center
+
+![octocat](octocat.png)
View
56 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);
View
60 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) {
View
1  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>
Please sign in to comment.
Something went wrong with that request. Please try again.