Retinize images before adding them the DOM to improve performance

src/scripts/_retina.js

@@ -1,46 +0,0 @@
-/*! jQuery Retina Plugin */
-(function(a) {
-    a.fn.retina = function(c) {
-        var d = {
-            "retina-background": false,
-            "retina-suffix": "@2x"
-        };
-        if (c) {
-            a.extend(d, c)
-        }
-        var b = function(f, g) {
-            var e = new Image();
-            e.onload = function() {
-                g(e)
-            };
-            e.src = f
-        };
-        if (window.devicePixelRatio > 1) {
-            this.each(function() {
-                var e = a(this);
-                if (this.tagName.toLowerCase() == "img" && e.attr("src")) {
-                    var g = e.attr("src").replace(/\.(?!.*\.)/, d["retina-suffix"] + ".");
-                    b(g, function(h) {
-                        e.attr("src", h.src);
-                        var i = a("<div>").append(e.clone()).remove().html();
-                        if (!(/(width|height)=["']\d+["']/.test(i))) {
-                            e.attr("width", h.width / 2)
-                        }
-                    })
-                }
-                if (d["retina-background"]) {
-                    var f = e.css("background-image");
-                    if (/^url\(.*\)$/.test(f)) {
-                        var g = f.substring(4, f.length - 1).replace(/\.(?!.*\.)/, d["retina-suffix"] + ".");
-                        b(g, function(h) {
-                            e.css("background-image", "url(" + h.src + ")");
-                            if (e.css("background-size") == "auto auto") {
-                                e.css("background-size", (h.width / 2) + "px auto")
-                            }
-                        })
-                    }
-                }
-            })
-        }
-    }
-})(jQuery);

src/scripts/build.js

@@ -63,8 +63,7 @@ build.album = function(data) {
 
 	var html		= '',
 		title		= data.title,
-		longTitle	= '',
-		typeThumb	= '';
+		longTitle	= '';
 
 	if (title!==null&&title.length>18) {
 
@@ -73,13 +72,13 @@ build.album = function(data) {
 
 	}
 
-	if (data.thumbs[0].split('.').pop()==='svg') typeThumb = 'nonretina';
+	var {path: thumbPath, retina: thumbRetina} = lychee.retinize(data.thumbs[0]);
 
 	html =	`
 			<div class='album' data-id='${ data.id }'>
-				<img src='${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-type='nonretina'>
-				<img src='${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-type='nonretina'>
-				<img src='${ data.thumbs[0] }' width='200' height='200' alt='thumb' data-type='${ typeThumb }'>
+				<img src='${ data.thumbs[2] }' width='200' height='200' alt='thumb' data-retina='false'>
+				<img src='${ data.thumbs[1] }' width='200' height='200' alt='thumb' data-retina='false'>
+				<img src='${ thumbPath }' width='200' height='200' alt='thumb' data-retina='${ thumbRetina }'>
 				<div class='overlay'>
 					<h1 title='${ longTitle }'>${ title }</h1>
 					<a>${ data.sysdate }</a>
@@ -117,9 +116,11 @@ build.photo = function(data) {
 
 	}
 
+	var {path: thumbPath, retina: thumbRetina} = lychee.retinize(data.thumbUrl);
+
 	html =	`
 			<div class='photo' data-album-id='${ data.album }' data-id='${ data.id }'>
-				<img src='${ data.thumbUrl }' width='200' height='200' alt='thumb'>
+				<img src='${ thumbPath }' width='200' height='200' alt='thumb'>
 				<div class='overlay'>
 					<h1 title='${ longTitle }'>${ title }</h1>
 			`

src/scripts/lychee.js

@@ -323,6 +323,31 @@ lychee.escapeHTML = function(s) {
 
 }
 
+lychee.retinize = function(path = '') {
+
+	var pixelRatio	= window.devicePixelRatio,
+		extention	= path.split('.').pop();
+
+	if ((pixelRatio!==undefined&&pixelRatio>1)&&
+		(extention!=='svg')) {
+
+			path = path.replace(/\.[^/.]+$/, '');
+			path = path + '@2x' + '.' + extention;
+
+			return {
+				path,
+				retina: true
+			};
+
+	}
+
+	return {
+		path,
+		retina: false
+	};
+
+}
+
 lychee.loadDropbox = function(callback) {
 
 	if (!lychee.dropbox&&lychee.dropboxKey) {

src/scripts/search.js

@@ -65,7 +65,6 @@ search.find = function(term) {
 						} else {
 							lychee.content.html(html);
 							lychee.animate('#content', 'contentZoomIn');
-							$('img[data-type!="svg"]').retina();
 						}
 
 					}, 300);

src/scripts/view.js

@@ -63,10 +63,9 @@ view.albums = {
 				lychee.content.html(smartData + albumsData);
 			}
 
-			$('img[data-type!="nonretina"]').retina();
-
 			// Restore scroll position
-			if (view.albums.content.scrollPosition!==null) {
+			if (view.albums.content.scrollPosition!==null&&
+				view.albums.content.scrollPosition!==0) {
 				$(document).scrollTop(view.albums.content.scrollPosition);
 			}
 
@@ -159,9 +158,8 @@ view.album = {
 			$.each(album.json.content, function() {
 				photosData += build.photo(this);
 			});
-			lychee.content.html(photosData);
 
-			$('img[data-type!="svg"]').retina();
+			lychee.content.html(photosData);
 
 		},
 

src/styles/_content.scss

@@ -110,7 +110,7 @@
 	}
 
 	// No overlay for empty albums
-	.album img[data-type^='nonretina'] + .overlay {
+	.album img[data-retina='false'] + .overlay {
 		background: none;
 	}
 
@@ -149,8 +149,8 @@
 		filter: drop-shadow(0 1px 3px black(.4));
 	}
 
-	.album img[data-type^='nonretina'] + .overlay h1,
-	.album img[data-type^='nonretina'] + .overlay a  { text-shadow: none; }
+	.album img[data-retina='false'] + .overlay h1,
+	.album img[data-retina='false'] + .overlay a  { text-shadow: none; }
 
 	/* Badges ------------------------------------------------*/
 	.album .badge,