From c9bf00b07037bb41aa5ffae16709d39f8b44f621 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Sun, 25 Jun 2017 18:53:33 +0100
Subject: [PATCH] Prevent display of unnecessary 404s while loading images

Former-commit-id: 6a28f20ac8d0178c0702b5fce502040926a405d8 [formerly 49c72f554f7cc7cfc559884c6beb5a47e2bf94da]
Former-commit-id: 690a04140e95a7b460d4af0a4d927238d09bfd36
---
 bin/Release/AppX/www/js/app.js | 22 ++++++++++++++++++++--
 www/js/app.js                  | 21 ++++++++++++++++++---
 2 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/bin/Release/AppX/www/js/app.js b/bin/Release/AppX/www/js/app.js
index a447bb5e..bf70cc42 100644
--- a/bin/Release/AppX/www/js/app.js
+++ b/bin/Release/AppX/www/js/app.js
@@ -787,7 +787,25 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
         $("#articleContent").contents().scrollTop(0);
 
         // Display the article inside the web page.
-        $('#articleContent').contents().find('body').html(htmlArticle);
+	// Prevents unnecessary 404's being produced when iframe loads images
+        var $body = $(htmlArticle);
+        $body.find('img').each(function(){
+            var image = $(this);
+            $(image).attr("data-src", $(image).attr("src"));
+            $(image).removeAttr("src");
+            $(image).attr("data-height", $(image).attr("height"));//GK
+            $(image).removeAttr("height"); //GK
+            $(image).attr("data-width", $(image).attr("width"));//GK
+            $(image).removeAttr("width"); //GK
+            //GK restore image height and size
+            $(image).on("load", function (e) {
+                this.width = $(image).attr("data-width");
+                this.height = $(image).attr("data-height");
+            });
+        });
+        // 404's should now only be produced on loading css and js
+        $('#articleContent').contents().find('body').html($body);
+       
         
         
         // If the ServiceWorker is not useable, we need to fallback to parse the DOM
@@ -854,7 +872,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
                 var image = $(this);
                 // It's a standard image contained in the ZIM file
                 // We try to find its name (from an absolute or relative URL)
-                var imageMatch = image.attr("src").match(regexpImageUrl);
+                var imageMatch = image.attr('data-src').match(regexpImageUrl);
                 if (imageMatch) {
                     var title = decodeURIComponent(imageMatch[1]);
                     selectedArchive.getDirEntryByTitle(title).then(function(dirEntry) {
diff --git a/www/js/app.js b/www/js/app.js
index a447bb5e..a6e5a694 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -787,8 +787,23 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
         $("#articleContent").contents().scrollTop(0);
 
         // Display the article inside the web page.
-        $('#articleContent').contents().find('body').html(htmlArticle);
-        
+        var $body = $(htmlArticle);
+        $body.find('img').each(function(){
+            var image = $(this);
+    	    // Prevents unnecessary 404's being produced when iframe loads images
+            $(image).attr("data-src", $(image).attr("src"));
+            $(image).removeAttr("src");
+            $(image).attr("data-height", $(image).attr("height"));
+            $(image).removeAttr("height");
+            $(image).attr("data-width", $(image).attr("width"));
+            $(image).removeAttr("width");
+            //Restore image height and size on image load
+            $(image).on("load", function (e) {
+                this.width = $(image).attr("data-width");
+                this.height = $(image).attr("data-height");
+            });
+        });
+        $('#articleContent').contents().find('body').html($body);
         
         // If the ServiceWorker is not useable, we need to fallback to parse the DOM
         // to inject math images, and replace some links with javascript calls
@@ -854,7 +869,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies','abstractFiles
                 var image = $(this);
                 // It's a standard image contained in the ZIM file
                 // We try to find its name (from an absolute or relative URL)
-                var imageMatch = image.attr("src").match(regexpImageUrl);
+                var imageMatch = image.attr('data-src').match(regexpImageUrl);
                 if (imageMatch) {
                     var title = decodeURIComponent(imageMatch[1]);
                     selectedArchive.getDirEntryByTitle(title).then(function(dirEntry) {