wait for all images to be loaded

Author: nerk

lib/output.js

@@ -21,11 +21,42 @@
  */
 
 /*jslint vars: true, plusplus: true, devel: true, nomen: true,  regexp: true, indent: 4, maxerr: 50 */
-/*global define, $ */
+/*global define, $, Image */
 
 define(function (require, exports) {
   "use strict";
 
+  // Fn to allow an event to fire after all images are loaded
+  $.fn.imagesLoaded = function () {
+    // get all the images (excluding those with no src attribute)
+    var $imgs = this.find('img[src!=""]');
+    // if there's no images, just return an already resolved promise
+    if (!$imgs.length) {
+      return $.Deferred().resolve().promise();
+    }
+
+    // for each image, add a deferred object to the array which resolves 
+    // when the image is loaded (or if loading fails)
+    var dfds = [];
+    $imgs.each(function () {
+      var dfd = $.Deferred();
+      dfds.push(dfd);
+      var img = new Image();
+      img.onload = function () {
+        dfd.resolve();
+      };
+      img.onerror = function () {
+        dfd.resolve();
+      };
+      img.src = this.src;
+
+    });
+
+    // return a master promise object which will resolve when all the deferred objects have resolved
+    // IE - when all the images are loaded
+    return $.when.apply($, dfds);
+  };
+
   var utils = require("lib/utils");
 
   // Array to keep all important configuration
@@ -254,34 +285,34 @@ define(function (require, exports) {
         $iframe[0].contentWindow.stopMath();
       }
 
-      $(body).find('#body-text').html(result.html);
+      $(body).find('#body-text').html(result.html).imagesLoaded().then(function () {
+        if (result.stem && inputData.renderMath) {
+          $iframe[0].contentWindow.startMath();
+        }
 
-      if (result.stem && inputData.renderMath) {
-        $iframe[0].contentWindow.startMath();
-      }
+        // Highlight source code
+        if (result.sourceHighlighter === 'highlightjs') {
+          $('pre code', body).each(function (i, block) {
+            $iframe[0].contentWindow.hljs.highlightBlock(block);
+          });
+        } else if (result.sourceHighlighter === 'prettify') {
+          $iframe[0].contentWindow.prettyPrint();
+        }
 
-      // Highlight source code
-      if (result.sourceHighlighter === 'highlightjs') {
-        $('pre code', body).each(function (i, block) {
-          $iframe[0].contentWindow.hljs.highlightBlock(block);
+        // make page anchors work and add titles to links
+        $iframe.contents().find('a[href]').each(function (index, link) {
+          var href = link.getAttribute("href");
+          if (href.match(/^#/)) {
+            $(link).attr('onclick', 'goto("' + href.substring(1) + '");return false;');
+          }
+          var title = link.getAttribute('title');
+          if (!title) {
+            link.setAttribute("title", href);
+          }
         });
-      } else if (result.sourceHighlighter === 'prettify') {
-        $iframe[0].contentWindow.prettyPrint();
-      }
 
-      // make page anchors work and add titles to links
-      $iframe.contents().find('a[href]').each(function (index, link) {
-        var href = link.getAttribute("href");
-        if (href.match(/^#/)) {
-          $(link).attr('onclick', 'goto("' + href.substring(1) + '");return false;');
-        }
-        var title = link.getAttribute('title');
-        if (!title) {
-          link.setAttribute("title", href);
-        }
+        onCompleteCallback();
       });
-
-      onCompleteCallback();
     }
 
     if (isNewDocument || needsFullUpdate(inputData, result)) {