mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

update lazy loading

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-24 19:14:55 -04:00
parent ae6726b46f
commit bcb026427e
3 changed files with 38 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

6
dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html vendored
View file

@ -1,8 +1,8 @@
<script>
require(['imageFetcher'], function (imageFetcher) {
window.ImageFetcherLazyloadImage = imageFetcher;
});
//require(['imageFetcher'], function (imageFetcher) {
// window.ImageFetcherLazyloadImage = imageFetcher;
//});
/**
* <lazyload-image>

4
dashboard-ui/components/ironcardlist.js
View file

@ -6,6 +6,8 @@
var maxPhysical = 80;
// is="lazyload-image"
html += '<template is="dom-bind">\
<iron-list as="item" id="ironList" scroll-target="' + scrollTarget + '" max-physical-count="' + maxPhysical + '" style="width:96%;" grid>\
<template>\
@ -14,7 +16,7 @@
<div class="cardScalable">\
<div class="cardPadder"></div>\
<a onclick$="{{item.onclick}}" data-action$="{{item.defaultAction}}" class$="{{item.anchorClass}}" href$="{{item.href}}">\
<img class$="{{item.imageClass}}" is="lazyload-image" src$="{{item.imgUrl}}" />\
<img class$="{{item.imageClass}}" src$="{{item.imgUrl}}" />\
<div inner-h-t-m-l="{{item.overlayHtml}}"></div>\
</a>\
</div>\

41
dashboard-ui/components/scrollthreshold.js
View file

@ -2,20 +2,26 @@
function thresholdMonitor(elem, horizontal, lowerTolerance, upperTolerance) {
var defaultTolerance = horizontal ? (screen.availWidth / 2) : (screen.availHeight / 2);
var defaultTolerance = horizontal ? (screen.availWidth / 3) : (screen.availHeight / 3);
lowerTolerance = lowerTolerance || defaultTolerance;
upperTolerance = upperTolerance || defaultTolerance;
var self = this;
var upperTriggered = false;
var upperTriggered = true;
var lowerTriggered = false;
var isWindow = elem == window || elem.tagName == 'HTML' || elem.tagName == 'BODY';
var scrollSize;
function getScrollSize() {
if (!scrollSize) {
scrollSize = horizontal ? (elem.scrollWidth - elem.clientWidth) : (elem.scrollHeight - elem.offsetHeight);
if (isWindow) {
scrollSize = horizontal ? (document.documentElement.scrollWidth - document.documentElement.offsetWidth) : (document.documentElement.scrollHeight - document.documentElement.offsetHeight);
} else {
scrollSize = horizontal ? (elem.scrollWidth - elem.offsetWidth) : (elem.scrollHeight - elem.offsetHeight);
}
}
return scrollSize;
}
@ -26,25 +32,40 @@
return;
}
var position = horizontal ? elem.scrollLeft : elem.scrollTop;
var position;
if (isWindow) {
position = horizontal ? window.pageXOffset : window.pageYOffset;
} else {
position = horizontal ? elem.scrollLeft : elem.scrollTop;
}
//console.log('onscroll: ' + position + '-' + getScrollSize());
// Detect upper threshold
if (!upperTriggered && position < upperTolerance) {
upperTriggered = true;
events.trigger(self, 'upper-threshold');
if (position < upperTolerance) {
if (!upperTriggered) {
upperTriggered = true;
events.trigger(self, 'upper-threshold');
}
} else {
upperTriggered = false;
}
// Detect lower threshold
if (!lowerTriggered && position >= (getScrollSize() - lowerTolerance)) {
if (position >= (getScrollSize() - lowerTolerance)) {
if (!lowerTriggered) {
lowerTriggered = true;
events.trigger(self, 'lower-threshold');
}
} else {
lowerTriggered = false;
events.trigger(self, 'lower-threshold');
}
}
self.reset = function () {
self.resetSize();
upperTriggered = false;
upperTriggered = true;
lowerTriggered = false;
};