From 239110a2bc1744418a58d06914a3ff652c7470df Mon Sep 17 00:00:00 2001
From: Olaf Conradi <olaf@conradi.org>
Date: Fri, 28 Dec 2012 23:28:53 +0100
Subject: [PATCH 1/4] Change acl selection box templating

Keep dynamic templating in javascript so browsers don't
prefetch non-existing files.
---
 js/acl.js                     | 2 +-
 view/acl_selector.tpl         | 1 -
 view/smarty3/acl_selector.tpl | 1 -
 3 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/js/acl.js b/js/acl.js
index e383224ca8..4f43252847 100644
--- a/js/acl.js
+++ b/js/acl.js
@@ -247,7 +247,7 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
diff --git a/view/acl_selector.tpl b/view/acl_selector.tpl
index 655ea89807..e2b85e36bc 100644
--- a/view/acl_selector.tpl
+++ b/view/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/smarty3/acl_selector.tpl b/view/smarty3/acl_selector.tpl
index 52f0573c8a..bc669a2ac6 100644
--- a/view/smarty3/acl_selector.tpl
+++ b/view/smarty3/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>

From a41692120e92e0b8afc73be24994cd6985a8b110 Mon Sep 17 00:00:00 2001
From: Olaf Conradi <olaf@conradi.org>
Date: Fri, 28 Dec 2012 23:51:40 +0100
Subject: [PATCH 2/4] Also change acl stuff in the other themes

---
 view/theme/frost-mobile/acl_selector.tpl         | 1 -
 view/theme/frost-mobile/js/acl.js                | 2 +-
 view/theme/frost-mobile/smarty3/acl_selector.tpl | 1 -
 view/theme/frost/acl_selector.tpl                | 1 -
 view/theme/frost/js/acl.js                       | 2 +-
 view/theme/frost/smarty3/acl_selector.tpl        | 1 -
 6 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/view/theme/frost-mobile/acl_selector.tpl b/view/theme/frost-mobile/acl_selector.tpl
index 327f18b65f..e79a6891a5 100644
--- a/view/theme/frost-mobile/acl_selector.tpl
+++ b/view/theme/frost-mobile/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/theme/frost-mobile/js/acl.js b/view/theme/frost-mobile/js/acl.js
index 65b2d38298..6feded6ab4 100644
--- a/view/theme/frost-mobile/js/acl.js
+++ b/view/theme/frost-mobile/js/acl.js
@@ -247,7 +247,7 @@ ACL.prototype.populate = function(data){
 /*	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);*/
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
diff --git a/view/theme/frost-mobile/smarty3/acl_selector.tpl b/view/theme/frost-mobile/smarty3/acl_selector.tpl
index 5b330de917..361bf8843a 100644
--- a/view/theme/frost-mobile/smarty3/acl_selector.tpl
+++ b/view/theme/frost-mobile/smarty3/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>
diff --git a/view/theme/frost/acl_selector.tpl b/view/theme/frost/acl_selector.tpl
index 327f18b65f..e79a6891a5 100644
--- a/view/theme/frost/acl_selector.tpl
+++ b/view/theme/frost/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/theme/frost/js/acl.js b/view/theme/frost/js/acl.js
index 9675588af2..0f080cfe13 100644
--- a/view/theme/frost/js/acl.js
+++ b/view/theme/frost/js/acl.js
@@ -247,7 +247,7 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
diff --git a/view/theme/frost/smarty3/acl_selector.tpl b/view/theme/frost/smarty3/acl_selector.tpl
index 5b330de917..361bf8843a 100644
--- a/view/theme/frost/smarty3/acl_selector.tpl
+++ b/view/theme/frost/smarty3/acl_selector.tpl
@@ -9,7 +9,6 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
-	<img src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>

From 94c8d7693fd43b75018dcab866affd7606a56a9c Mon Sep 17 00:00:00 2001
From: Olaf Conradi <olaf@conradi.org>
Date: Sat, 29 Dec 2012 23:44:26 +0100
Subject: [PATCH 3/4] Keep html in template, use data attribute for img

Revert previous changes to fix browser preloading a template variable as image.
Images use a data attribute within templates as src.
Javascript will substitute them.
---
 js/acl.js                                        | 9 +++++++--
 view/acl_selector.tpl                            | 1 +
 view/smarty3/acl_selector.tpl                    | 1 +
 view/theme/frost-mobile/acl_selector.tpl         | 1 +
 view/theme/frost-mobile/js/acl.js                | 7 ++++++-
 view/theme/frost-mobile/smarty3/acl_selector.tpl | 1 +
 view/theme/frost/js/acl.js                       | 7 ++++++-
 view/theme/frost/smarty3/acl_selector.tpl        | 1 +
 8 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/js/acl.js b/js/acl.js
index 4f43252847..36cf74970f 100644
--- a/js/acl.js
+++ b/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
-		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
+		html = html.format(this.photo, this.name, this.type, this.id, '', this.network, this.link);
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/acl_selector.tpl b/view/acl_selector.tpl
index e2b85e36bc..837225a5b1 100644
--- a/view/acl_selector.tpl
+++ b/view/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/smarty3/acl_selector.tpl b/view/smarty3/acl_selector.tpl
index bc669a2ac6..e9f8030d7c 100644
--- a/view/smarty3/acl_selector.tpl
+++ b/view/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>
diff --git a/view/theme/frost-mobile/acl_selector.tpl b/view/theme/frost-mobile/acl_selector.tpl
index e79a6891a5..df34a1a2ae 100644
--- a/view/theme/frost-mobile/acl_selector.tpl
+++ b/view/theme/frost-mobile/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>$show</a>
 	<a href="#" class='acl-button-hide'>$hide</a>
 </div>
diff --git a/view/theme/frost-mobile/js/acl.js b/view/theme/frost-mobile/js/acl.js
index 6feded6ab4..20f0d46189 100644
--- a/view/theme/frost-mobile/js/acl.js
+++ b/view/theme/frost-mobile/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 /*	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);*/
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/theme/frost-mobile/smarty3/acl_selector.tpl b/view/theme/frost-mobile/smarty3/acl_selector.tpl
index 361bf8843a..f3b1abea7c 100644
--- a/view/theme/frost-mobile/smarty3/acl_selector.tpl
+++ b/view/theme/frost-mobile/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>
diff --git a/view/theme/frost/js/acl.js b/view/theme/frost/js/acl.js
index 0f080cfe13..6b443b2481 100644
--- a/view/theme/frost/js/acl.js
+++ b/view/theme/frost/js/acl.js
@@ -247,12 +247,17 @@ ACL.prototype.populate = function(data){
 	var height = Math.ceil(data.tot / that.nw) * 42;
 	that.list_content.height(height);
 	$j(data.items).each(function(){
-		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'><img src='{0}'/><p>{1}</p>"+that.item_tpl+"</div>";
+		html = "<div class='acl-list-item {4} {5}' title='{6}' id='{2}{3}'>"+that.item_tpl+"</div>";
 		html = html.format( this.photo, this.name, this.type, this.id, '', this.network, this.link );
 		if (this.uids!=undefined) that.group_uids[this.id] = this.uids;
 		//console.log(html);
 		that.list_content.append(html);
 	});
+	$(".acl-list-item img[data-src]").each(function(i, el){
+		// Replace data-src attribute with src attribute for every image
+		$(el).attr('src', $(el).data("src"));
+		$(el).removeAttr("data-src");
+	});
 	that.update_view();
 }
 
diff --git a/view/theme/frost/smarty3/acl_selector.tpl b/view/theme/frost/smarty3/acl_selector.tpl
index 361bf8843a..f3b1abea7c 100644
--- a/view/theme/frost/smarty3/acl_selector.tpl
+++ b/view/theme/frost/smarty3/acl_selector.tpl
@@ -9,6 +9,7 @@
 </div>
 
 <div class="acl-list-item" rel="acl-template" style="display:none">
+	<img data-src="{0}"><p>{1}</p>
 	<a href="#" class='acl-button-show'>{{$show}}</a>
 	<a href="#" class='acl-button-hide'>{{$hide}}</a>
 </div>

From dbf8f711cffbc7b659a06856b2301820c66274ca Mon Sep 17 00:00:00 2001
From: Olaf Conradi <olaf@conradi.org>
Date: Sun, 30 Dec 2012 00:28:48 +0100
Subject: [PATCH 4/4] Fix browser prefetch in notifications menu

Fix browser prefetch by substituting data-src with src for images
---
 js/main.js                              | 10 ++++++++--
 view/nav.tpl                            |  2 +-
 view/smarty3/nav.tpl                    |  2 +-
 view/theme/cleanzero/nav.tpl            |  2 +-
 view/theme/cleanzero/smarty3/nav.tpl    |  2 +-
 view/theme/diabook/nav.tpl              |  2 +-
 view/theme/diabook/smarty3/nav.tpl      |  2 +-
 view/theme/dispy/nav.tpl                |  2 +-
 view/theme/dispy/smarty3/nav.tpl        |  2 +-
 view/theme/duepuntozero/nav.tpl         |  2 +-
 view/theme/duepuntozero/smarty3/nav.tpl |  2 +-
 view/theme/facepark/nav.tpl             |  2 +-
 view/theme/facepark/smarty3/nav.tpl     |  2 +-
 view/theme/frost-mobile/js/main.js      |  6 ++++++
 view/theme/frost-mobile/nav.tpl         |  2 +-
 view/theme/frost-mobile/smarty3/nav.tpl |  2 +-
 view/theme/frost/js/main.js             |  6 ++++++
 view/theme/frost/nav.tpl                |  2 +-
 view/theme/frost/smarty3/nav.tpl        |  2 +-
 view/theme/quattro/nav.tpl              |  2 +-
 view/theme/quattro/smarty3/nav.tpl      |  2 +-
 view/theme/smoothly/nav.tpl             |  2 +-
 view/theme/smoothly/smarty3/nav.tpl     |  2 +-
 view/theme/testbubble/nav.tpl           |  2 +-
 view/theme/testbubble/smarty3/nav.tpl   |  2 +-
 view/theme/vier/nav.tpl                 |  2 +-
 view/theme/vier/smarty3/nav.tpl         |  2 +-
 27 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/js/main.js b/js/main.js
index 4a75be747a..5cdf2a0804 100644
--- a/js/main.js
+++ b/js/main.js
@@ -181,7 +181,14 @@
 					html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'), e.attr('seen'));
 					nnm.append(html);
 				});
+
+				$("img[data-src]", nnm).each(function(i, el){
+					// Replace data-src attribute with src attribute for every image
+					$(el).attr('src', $(el).data("src"));
+					$(el).removeAttr("data-src");
+				});
 			}
+
 			notif = eNotif.attr('count');
 			if (notif>0){
 				$("#nav-notifications-linkmenu").addClass("on");
@@ -202,8 +209,7 @@
 			});
 			
 		});
-		
-		
+
  		NavUpdate(); 
 		// Allow folks to stop the ajax page updates with the pause/break key
 		$(document).keydown(function(event) {
diff --git a/view/nav.tpl b/view/nav.tpl
index 8969accb73..04c4931fc6 100644
--- a/view/nav.tpl
+++ b/view/nav.tpl
@@ -64,5 +64,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/smarty3/nav.tpl b/view/smarty3/nav.tpl
index 832d9f123c..7f7bb6290f 100644
--- a/view/smarty3/nav.tpl
+++ b/view/smarty3/nav.tpl
@@ -64,5 +64,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/cleanzero/nav.tpl b/view/theme/cleanzero/nav.tpl
index 981f975c92..17a2f72590 100644
--- a/view/theme/cleanzero/nav.tpl
+++ b/view/theme/cleanzero/nav.tpl
@@ -69,7 +69,7 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 <script>
 var pagetitle = null;
diff --git a/view/theme/cleanzero/smarty3/nav.tpl b/view/theme/cleanzero/smarty3/nav.tpl
index ccc51151d4..8146ca952f 100644
--- a/view/theme/cleanzero/smarty3/nav.tpl
+++ b/view/theme/cleanzero/smarty3/nav.tpl
@@ -69,7 +69,7 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 <script>
 var pagetitle = null;
diff --git a/view/theme/diabook/nav.tpl b/view/theme/diabook/nav.tpl
index 92ce03cb4c..c91a9f56d2 100644
--- a/view/theme/diabook/nav.tpl
+++ b/view/theme/diabook/nav.tpl
@@ -144,7 +144,7 @@
 
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 
diff --git a/view/theme/diabook/smarty3/nav.tpl b/view/theme/diabook/smarty3/nav.tpl
index 2e6198f14c..0345141089 100644
--- a/view/theme/diabook/smarty3/nav.tpl
+++ b/view/theme/diabook/smarty3/nav.tpl
@@ -144,7 +144,7 @@
 
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 
diff --git a/view/theme/dispy/nav.tpl b/view/theme/dispy/nav.tpl
index 6af86f51c0..d0307b60d0 100644
--- a/view/theme/dispy/nav.tpl
+++ b/view/theme/dispy/nav.tpl
@@ -139,7 +139,7 @@ $langselector
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
     <li class="{4}">
-    <a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a>
+    <a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a>
     </li>
 </ul>
 
diff --git a/view/theme/dispy/smarty3/nav.tpl b/view/theme/dispy/smarty3/nav.tpl
index 51c1fa3d66..401c2d30be 100644
--- a/view/theme/dispy/smarty3/nav.tpl
+++ b/view/theme/dispy/smarty3/nav.tpl
@@ -139,7 +139,7 @@
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
     <li class="{4}">
-    <a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a>
+    <a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a>
     </li>
 </ul>
 
diff --git a/view/theme/duepuntozero/nav.tpl b/view/theme/duepuntozero/nav.tpl
index 373fb2d368..edffcebf49 100644
--- a/view/theme/duepuntozero/nav.tpl
+++ b/view/theme/duepuntozero/nav.tpl
@@ -66,5 +66,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/duepuntozero/smarty3/nav.tpl b/view/theme/duepuntozero/smarty3/nav.tpl
index e71e64ea8a..2baebda441 100644
--- a/view/theme/duepuntozero/smarty3/nav.tpl
+++ b/view/theme/duepuntozero/smarty3/nav.tpl
@@ -66,5 +66,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/facepark/nav.tpl b/view/theme/facepark/nav.tpl
index 8969accb73..04c4931fc6 100644
--- a/view/theme/facepark/nav.tpl
+++ b/view/theme/facepark/nav.tpl
@@ -64,5 +64,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/facepark/smarty3/nav.tpl b/view/theme/facepark/smarty3/nav.tpl
index 832d9f123c..7f7bb6290f 100644
--- a/view/theme/facepark/smarty3/nav.tpl
+++ b/view/theme/facepark/smarty3/nav.tpl
@@ -64,5 +64,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/frost-mobile/js/main.js b/view/theme/frost-mobile/js/main.js
index 1db338fcdf..197d496646 100644
--- a/view/theme/frost-mobile/js/main.js
+++ b/view/theme/frost-mobile/js/main.js
@@ -187,6 +187,12 @@
 					html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'), e.attr('seen'));
 					nnm.append(html);
 				});
+
+				$("img[data-src]", nnm).each(function(i, el){
+					// Replace data-src attribute with src attribute for every image
+					$(el).attr('src', $(el).data("src"));
+					$(el).removeAttr("data-src");
+				});
 			}
 			notif = eNotif.attr('count');
 			if (notif>0){
diff --git a/view/theme/frost-mobile/nav.tpl b/view/theme/frost-mobile/nav.tpl
index 8425640a70..01aafabf0d 100644
--- a/view/theme/frost-mobile/nav.tpl
+++ b/view/theme/frost-mobile/nav.tpl
@@ -142,5 +142,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/frost-mobile/smarty3/nav.tpl b/view/theme/frost-mobile/smarty3/nav.tpl
index 9e88404708..fb5d6223bd 100644
--- a/view/theme/frost-mobile/smarty3/nav.tpl
+++ b/view/theme/frost-mobile/smarty3/nav.tpl
@@ -142,5 +142,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/frost/js/main.js b/view/theme/frost/js/main.js
index 4aaa7ddb74..91e79ffc38 100644
--- a/view/theme/frost/js/main.js
+++ b/view/theme/frost/js/main.js
@@ -179,6 +179,12 @@
 					html = notifications_tpl.format(e.attr('href'),e.attr('photo'), text, e.attr('date'), e.attr('seen'));
 					nnm.append(html);
 				});
+
+				$("img[data-src]", nnm).each(function(i, el){
+					// Replace data-src attribute with src attribute for every image
+					$(el).attr('src', $(el).data("src"));
+					$(el).removeAttr("data-src");
+				});
 			}
 			notif = eNotif.attr('count');
 			if (notif>0){
diff --git a/view/theme/frost/nav.tpl b/view/theme/frost/nav.tpl
index ffa4b2fbcf..adb9c9f073 100644
--- a/view/theme/frost/nav.tpl
+++ b/view/theme/frost/nav.tpl
@@ -146,5 +146,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/frost/smarty3/nav.tpl b/view/theme/frost/smarty3/nav.tpl
index 9196c94d62..6e1d78dcc7 100644
--- a/view/theme/frost/smarty3/nav.tpl
+++ b/view/theme/frost/smarty3/nav.tpl
@@ -146,5 +146,5 @@
 </nav>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
diff --git a/view/theme/quattro/nav.tpl b/view/theme/quattro/nav.tpl
index bde9847fcb..ca84e7db54 100644
--- a/view/theme/quattro/nav.tpl
+++ b/view/theme/quattro/nav.tpl
@@ -89,7 +89,7 @@
 
 </nav>
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 <div style="position: fixed; top: 3px; left: 5px; z-index:9999">$langselector</div>
diff --git a/view/theme/quattro/smarty3/nav.tpl b/view/theme/quattro/smarty3/nav.tpl
index a31c3d8bb5..1e25b0472b 100644
--- a/view/theme/quattro/smarty3/nav.tpl
+++ b/view/theme/quattro/smarty3/nav.tpl
@@ -89,7 +89,7 @@
 
 </nav>
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 <div style="position: fixed; top: 3px; left: 5px; z-index:9999">{{$langselector}}</div>
diff --git a/view/theme/smoothly/nav.tpl b/view/theme/smoothly/nav.tpl
index fee2577a50..b923718da0 100644
--- a/view/theme/smoothly/nav.tpl
+++ b/view/theme/smoothly/nav.tpl
@@ -62,7 +62,7 @@
 </div>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 <div style="position: fixed; top: 3px; left: 5px; z-index:9999">$langselector</div>
diff --git a/view/theme/smoothly/smarty3/nav.tpl b/view/theme/smoothly/smarty3/nav.tpl
index a89e9b88fb..24b9dd2001 100644
--- a/view/theme/smoothly/smarty3/nav.tpl
+++ b/view/theme/smoothly/smarty3/nav.tpl
@@ -62,7 +62,7 @@
 </div>
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 <div style="position: fixed; top: 3px; left: 5px; z-index:9999">{{$langselector}}</div>
diff --git a/view/theme/testbubble/nav.tpl b/view/theme/testbubble/nav.tpl
index 43cc7bca00..f4c504d365 100644
--- a/view/theme/testbubble/nav.tpl
+++ b/view/theme/testbubble/nav.tpl
@@ -60,7 +60,7 @@
 
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 
diff --git a/view/theme/testbubble/smarty3/nav.tpl b/view/theme/testbubble/smarty3/nav.tpl
index 527ecc8196..11ce89cb5d 100644
--- a/view/theme/testbubble/smarty3/nav.tpl
+++ b/view/theme/testbubble/smarty3/nav.tpl
@@ -60,7 +60,7 @@
 
 
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li class="{4}"><a href="{0}"><img src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
+	<li class="{4}"><a href="{0}"><img data-src="{1}" height="24" width="24" alt="" />{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 
diff --git a/view/theme/vier/nav.tpl b/view/theme/vier/nav.tpl
index d0d69948ef..dd41d844a1 100644
--- a/view/theme/vier/nav.tpl
+++ b/view/theme/vier/nav.tpl
@@ -104,7 +104,7 @@
 
 </nav>
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 {#
diff --git a/view/theme/vier/smarty3/nav.tpl b/view/theme/vier/smarty3/nav.tpl
index 0379e30ee0..fc9e9c6638 100644
--- a/view/theme/vier/smarty3/nav.tpl
+++ b/view/theme/vier/smarty3/nav.tpl
@@ -104,7 +104,7 @@
 
 </nav>
 <ul id="nav-notifications-template" style="display:none;" rel="template">
-	<li><a href="{0}"><img src="{1}">{2} <span class="notif-when">{3}</span></a></li>
+	<li><a href="{0}"><img data-src="{1}">{2} <span class="notif-when">{3}</span></a></li>
 </ul>
 
 {{*