cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-18 11:28:23 -07:00
Code Issues Packages Projects Releases Wiki Activity

update image lazy loading

Browse Source
This commit is contained in:
Luke Pulverenti 2015-11-28 19:23:48 -05:00
parent 30f68bdf98
commit 7029c9112b
10 changed files with 74 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
dashboard-ui/apiclient/store.js
View File

@ -10,6 +10,7 @@
if (defaultObject) {
try {
defaultObject.setItem('_test', '0');
defaultObject.removeItem('_test');
isDefaultAvailable = true;
} catch (e) {

4
dashboard-ui/components/imagedownloader/imagedownloader.js
View File

@ -65,7 +65,9 @@
html += getRemoteImageHtml(imagesResult.Images[i], imageType);
}
$('.availableImagesList', page).html(html).lazyChildren();
var availableImagesList = page.querySelector('.availableImagesList');
availableImagesList.innerHTML = html;
ImageLoader.lazyChildren(availableImagesList);
$('.btnNextPage', page).on('click', function () {
browsableImageStartIndex += browsableImagePageSize;

13
dashboard-ui/scripts/gamesrecommendedpage.js
View File

@ -19,14 +19,16 @@
ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).then(function (items) {
$('#recentlyAddedItems', page).html(LibraryBrowser.getPosterViewHtml({
var recentlyAddedItems = page.querySelector('#recentlyAddedItems');
recentlyAddedItems.innerHTML = LibraryBrowser.getPosterViewHtml({
items: items,
transparent: true,
borderless: true,
shape: 'auto',
lazy: true
})).lazyChildren();
});
ImageLoader.lazyChildren(recentlyAddedItems);
});
@ -52,15 +54,16 @@
$('#recentlyPlayedSection', page).hide();
}
$('#recentlyPlayedItems', page).html(LibraryBrowser.getPosterViewHtml({
var recentlyPlayedItems = page.querySelector('#recentlyPlayedItems');
recentlyPlayedItems.innerHTML = LibraryBrowser.getPosterViewHtml({
items: result.Items,
transparent: true,
borderless: true,
shape: 'auto',
lazy: true
})).lazyChildren();
});
ImageLoader.lazyChildren(recentlyPlayedItems);
});
});

8
dashboard-ui/scripts/itemdetailpage.js
View File

@ -725,6 +725,14 @@
});
}
$.fn.lazyChildren = function () {
for (var i = 0, length = this.length; i < length; i++) {
ImageLoader.lazyChildren(this[i]);
}
return this;
};
function renderSeriesAirTime(page, item, isStatic) {
if (item.Type != "Series") {

8
dashboard-ui/scripts/mediaplayer-video.js
View File

@ -428,6 +428,14 @@
});
};
$.fn.lazyChildren = function () {
for (var i = 0, length = this.length; i < length; i++) {
ImageLoader.lazyChildren(this[i]);
}
return this;
};
function getNowPlayingTabsHtml(item) {
var html = '';

4
dashboard-ui/scripts/moviesrecommended.js
View File

@ -132,7 +132,9 @@
});
}
$('#resumableItems', page).html(html).lazyChildren();
var resumableItems = page.querySelector('#resumableItems');
resumableItems.innerHTML = html;
ImageLoader.lazyChildren(resumableItems);
});
}

11
dashboard-ui/scripts/site.js
View File

@ -770,13 +770,16 @@ var Dashboard = {
$(document.body).append(html);
var elem = $('#userFlyout').panel({}).lazyChildren().trigger('create').panel("open").on("panelclose", function () {
var userFlyout = document.querySelector('#userFlyout');
ImageLoader.lazyChildren(userFlyout);
$(userFlyout).panel({}).panel("open").on("panelclose", function () {
$(this).off("panelclose").remove();
});
ConnectionManager.user(window.ApiClient).then(function (user) {
Dashboard.updateUserFlyout(elem, user);
Dashboard.updateUserFlyout(userFlyout, user);
});
});
},
@ -797,7 +800,9 @@ var Dashboard = {
}
html += user.name;
$('.userHeader', elem).html(html).lazyChildren();
var userHeader = elem.querySelector('.userHeader');
userHeader.innerHTML = html;
ImageLoader.lazyChildren(userHeader);
html = '';

8
dashboard-ui/scripts/syncactivity.js
View File

@ -218,6 +218,14 @@
}
}
$.fn.lazyChildren = function () {
for (var i = 0, length = this.length; i < length; i++) {
ImageLoader.lazyChildren(this[i]);
}
return this;
};
function refreshData(page, jobs) {
for (var i = 0, length = jobs.length; i < length; i++) {

8
dashboard-ui/scripts/syncjob.js
View File

@ -102,6 +102,14 @@
return html;
}
$.fn.lazyChildren = function () {
for (var i = 0, length = this.length; i < length; i++) {
ImageLoader.lazyChildren(this[i]);
}
return this;
};
function renderJobItems(page, items) {
var html = '';

85
dashboard-ui/thirdparty/jquery.unveil-custom.js vendored
View File

@ -1,8 +1,4 @@
(function ($) {
})(jQuery);
/**
/**
* jQuery Unveil
* A very lightweight jQuery plugin to lazy load images
* http://luis-almeida.github.com/unveil
@ -12,7 +8,7 @@
* https://github.com/luis-almeida
*/
(function ($) {
(function () {
/**
* Copyright 2012, Digital Fusion
@ -24,66 +20,34 @@
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
var $w = $(window);
var thresholdX = Math.max(screen.availWidth);
var thresholdY = Math.max(screen.availHeight);
function visibleInViewport(elem, partial, hidden, direction) {
function visibleInViewport(elem, partial) {
var t = elem,
vpWidth = $w.width(),
vpHeight = $w.height(),
direction = (direction) ? direction : 'both',
clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
thresholdX = thresholdX || 0;
thresholdY = thresholdY || 0;
if (typeof t.getBoundingClientRect === 'function') {
var vpWidth = window.innerWidth,
vpHeight = window.innerHeight;
// Use this native browser method, if available.
var rec = t.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY,
lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX,
rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
// Use this native browser method, if available.
var rec = elem.getBoundingClientRect(),
tViz = rec.top >= 0 && rec.top < vpHeight + thresholdY,
bViz = rec.bottom > 0 && rec.bottom <= vpHeight + thresholdY,
lViz = rec.left >= 0 && rec.left < vpWidth + thresholdX,
rViz = rec.right > 0 && rec.right <= vpWidth + thresholdX,
vVisible = partial ? tViz || bViz : tViz && bViz,
hVisible = partial ? lViz || rViz : lViz && rViz;
if (direction === 'both')
return clientSize && vVisible && hVisible;
else if (direction === 'vertical')
return clientSize && vVisible;
else if (direction === 'horizontal')
return clientSize && hVisible;
} else {
var $t = $(elem);
var viewTop = $w.scrollTop(),
viewBottom = viewTop + vpHeight,
viewLeft = $w.scrollLeft(),
viewRight = viewLeft + vpWidth,
offset = $t.offset(),
_top = offset.top,
_bottom = _top + $t.height(),
_left = offset.left,
_right = _left + $t.width(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom,
compareLeft = partial === true ? _right : _left,
compareRight = partial === true ? _left : _right;
if (direction === 'both')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
else if (direction === 'vertical')
return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
else if (direction === 'horizontal')
return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
}
return vVisible && hVisible;
}
var unveilId = 0;
function isVisible(elem) {
return visibleInViewport(elem, true, false, 'both');
return visibleInViewport(elem, true);
}
function fillImage(elem) {
@ -145,7 +109,7 @@
}
function bindEvent(elems, method, name, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i][method](name, fn);
}
@ -168,16 +132,6 @@
unveilElements(elem.getElementsByClassName('lazy'), elem);
}
$.fn.lazyChildren = function () {
if (this.length == 1) {
lazyChildren(this[0]);
} else {
unveilElements($('.lazy', this));
}
return this;
};
function lazyImage(elem, url) {
elem.setAttribute('data-src', url);
@ -190,7 +144,7 @@
lazyChildren: lazyChildren
};
})(window.jQuery || window.Zepto);
})();
(function () {
@ -227,7 +181,6 @@
self.setImageInto = setImageIntoElement;
}
console.log('creating simpleImageStore');
window.ImageStore = new simpleImageStore();
})();