Optimized image rendering, avoid duplicated image load when content changed

2 files changed, 9 insertions, 9 deletions

diff --git a/public/js/extra.js b/public/js/extra.js
index f6d47647..084ebe8a 100644
--- a/public/js/extra.js
+++ b/public/js/extra.js
@@ -128,7 +128,7 @@ function finishView(view) {
         }
     });
     //image href new window(emoji not included)
-    var images = view.find("p > img[src]:not([class])");
+    var images = view.find("img.raw[src]").removeClass("raw");
     images.each(function (key, value) {
         var src = $(value).attr('src');
         var a = $('<a>');
@@ -136,7 +136,12 @@ function finishView(view) {
             a.attr('href', src);
             a.attr('target', "_blank");
         }
-        a.html($(value).clone());
+        var clone = $(value).clone();
+        clone[0].onload = function (e) {
+            if(viewAjaxCallback)
+                viewAjaxCallback();
+        };
+        a.html(clone);
         $(value).replaceWith(a);
     });
     //blockquote
diff --git a/public/js/syncscroll.js b/public/js/syncscroll.js
index 48829a4a..2ed3ff03 100644
--- a/public/js/syncscroll.js
+++ b/public/js/syncscroll.js
@@ -74,13 +74,8 @@ md.renderer.rules.image = function (tokens, idx, options /*, env */ ) {
     var title = tokens[idx].title ? (' title="' + Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(tokens[idx].title)) + '"') : '';
     var alt = ' alt="' + (tokens[idx].alt ? Remarkable.utils.escapeHtml(Remarkable.utils.replaceEntities(tokens[idx].alt)) : '') + '"';
     var suffix = options.xhtmlOut ? ' /' : '';
-    var image = $('<img' + src + alt + title + suffix + '>');
-    image[0].onload = function (e) {
-        if (viewAjaxCallback)
-            viewAjaxCallback();
-    };
-    return image[0].outerHTML;
-};
+    return '<img class="raw"' + src + alt + title + suffix + '>';
+}
 
 md.renderer.rules.fence = function (tokens, idx, options, env, self) {
     var token = tokens[idx];