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>
|
<script>
|
||||||
|
|
||||||
require(['imageFetcher'], function (imageFetcher) {
|
//require(['imageFetcher'], function (imageFetcher) {
|
||||||
window.ImageFetcherLazyloadImage = imageFetcher;
|
// window.ImageFetcherLazyloadImage = imageFetcher;
|
||||||
});
|
//});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* <lazyload-image>
|
* <lazyload-image>
|
||||||
|
|
|
@ -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>\
|
||||||
|
|
|
@ -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) {
|
||||||
|
if (!upperTriggered) {
|
||||||
upperTriggered = true;
|
upperTriggered = true;
|
||||||
events.trigger(self, 'upper-threshold');
|
events.trigger(self, 'upper-threshold');
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
upperTriggered = false;
|
||||||
|
}
|
||||||
|
|
||||||
// Detect lower threshold
|
// Detect lower threshold
|
||||||
if (!lowerTriggered && position >= (getScrollSize() - lowerTolerance)) {
|
if (position >= (getScrollSize() - lowerTolerance)) {
|
||||||
lowerTriggered = false;
|
if (!lowerTriggered) {
|
||||||
|
lowerTriggered = true;
|
||||||
events.trigger(self, 'lower-threshold');
|
events.trigger(self, 'lower-threshold');
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
lowerTriggered = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
self.reset = function () {
|
self.reset = function () {
|
||||||
self.resetSize();
|
self.resetSize();
|
||||||
upperTriggered = false;
|
upperTriggered = true;
|
||||||
lowerTriggered = false;
|
lowerTriggered = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue