mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update lazy loading
This commit is contained in:
parent
ae6726b46f
commit
bcb026427e
3 changed files with 38 additions and 15 deletions
|
@ -1,8 +1,8 @@
|
|||
<script>
|
||||
|
||||
require(['imageFetcher'], function (imageFetcher) {
|
||||
window.ImageFetcherLazyloadImage = imageFetcher;
|
||||
});
|
||||
//require(['imageFetcher'], function (imageFetcher) {
|
||||
// window.ImageFetcherLazyloadImage = imageFetcher;
|
||||
//});
|
||||
|
||||
/**
|
||||
* <lazyload-image>
|
||||
|
|
|
@ -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>\
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue