arno/lychee
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Retinize images before adding them the DOM to improve performance

Browse Source
This commit is contained in:
Tobias Reich 2015-03-31 23:16:18 +02:00
parent 155ba27841
commit 82e78da455
9 changed files with 39 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist/main.css vendored
View File

Binary file not shown.

BIN
dist/main.js vendored
View File

Binary file not shown.

BIN
dist/view.js vendored
View File

Binary file not shown.

46
src/scripts/_retina.js
View File

@ -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);

15
src/scripts/build.js
View File

@ -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>
`

25
src/scripts/lychee.js
View File

@ -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) {

1
src/scripts/search.js
View File

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

8
src/scripts/view.js
View File

@ -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);
},

6
src/styles/_content.scss
View File

@ -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,