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> <script>
require(['imageFetcher'], function (imageFetcher) { //require(['imageFetcher'], function (imageFetcher) {
window.ImageFetcherLazyloadImage = imageFetcher; // window.ImageFetcherLazyloadImage = imageFetcher;
}); //});
/** /**
* <lazyload-image> * <lazyload-image>

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

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

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

@ -2,20 +2,26 @@
function thresholdMonitor(elem, horizontal, lowerTolerance, upperTolerance) { 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; lowerTolerance = lowerTolerance || defaultTolerance;
upperTolerance = upperTolerance || defaultTolerance; upperTolerance = upperTolerance || defaultTolerance;
var self = this; var self = this;
var upperTriggered = false; var upperTriggered = true;
var lowerTriggered = false; var lowerTriggered = false;
var isWindow = elem == window || elem.tagName == 'HTML' || elem.tagName == 'BODY';
var scrollSize; var scrollSize;
function getScrollSize() { function getScrollSize() {
if (!scrollSize) { 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; return scrollSize;
} }
@ -26,25 +32,40 @@
return; 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()); //console.log('onscroll: ' + position + '-' + getScrollSize());
// Detect upper threshold // Detect upper threshold
if (!upperTriggered && position < upperTolerance) { if (position < upperTolerance) {
upperTriggered = true; if (!upperTriggered) {
events.trigger(self, 'upper-threshold'); upperTriggered = true;
events.trigger(self, 'upper-threshold');
}
} else {
upperTriggered = false;
} }
// Detect lower threshold // Detect lower threshold
if (!lowerTriggered && position >= (getScrollSize() - lowerTolerance)) { if (position >= (getScrollSize() - lowerTolerance)) {
if (!lowerTriggered) {
lowerTriggered = true;
events.trigger(self, 'lower-threshold');
}
} else {
lowerTriggered = false; lowerTriggered = false;
events.trigger(self, 'lower-threshold');
} }
} }
self.reset = function () { self.reset = function () {
self.resetSize(); self.resetSize();
upperTriggered = false; upperTriggered = true;
lowerTriggered = false; lowerTriggered = false;
}; };