From: Olaf Conradi <olaf@conradi.org>
Date: Sat, 29 Dec 2012 23:28:48 +0000 (+0100)
Subject: Fix browser prefetch in notifications menu
X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=dbf8f711cffbc7b659a06856b2301820c66274ca;p=friendica.git

Fix browser prefetch in notifications menu

Fix browser prefetch by substituting data-src with src for images
---

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>
 
 {{*