mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
use shared image loader
This commit is contained in:
parent
a08a1c37ec
commit
ad1f82dbaf
17 changed files with 570 additions and 347 deletions
56
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
56
dashboard-ui/thirdparty/jquery.unveil-custom.js
vendored
|
@ -1,4 +1,4 @@
|
|||
define(['visibleinviewport'], function (visibleInViewport) {
|
||||
define(['visibleinviewport', 'imageloader'], function (visibleInViewport, imageLoader) {
|
||||
|
||||
var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
|
||||
var thresholdX = screen.availWidth;
|
||||
|
@ -11,11 +11,27 @@
|
|||
function fillImage(elem) {
|
||||
var source = elem.getAttribute('data-src');
|
||||
if (source) {
|
||||
ImageStore.setImageInto(elem, source);
|
||||
imageLoader.loadImage(elem, source).then(fadeIn);
|
||||
elem.setAttribute("data-src", '');
|
||||
}
|
||||
}
|
||||
|
||||
function fadeIn(elem) {
|
||||
|
||||
if (!browserInfo.animate || browserInfo.mobile) {
|
||||
return;
|
||||
}
|
||||
if (elem.classList.contains('noFade')) {
|
||||
return;
|
||||
}
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '0', offset: 0 },
|
||||
{ opacity: '1', offset: 1 }];
|
||||
var timing = { duration: 300, iterations: 1 };
|
||||
elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
function cancelAll(tokens) {
|
||||
for (var i = 0, length = tokens.length; i < length; i++) {
|
||||
|
||||
|
@ -90,11 +106,7 @@
|
|||
|
||||
for (var i = 0, length = elems.length; i < length; i++) {
|
||||
var elem = elems[0];
|
||||
var source = elem.getAttribute('data-src');
|
||||
if (source) {
|
||||
ImageStore.setImageInto(elem, source);
|
||||
elem.setAttribute("data-src", '');
|
||||
}
|
||||
fillImage(elem);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -109,36 +121,6 @@
|
|||
fillImages([elem]);
|
||||
}
|
||||
|
||||
function setImageIntoElement(elem, url) {
|
||||
|
||||
if (elem.tagName !== "IMG") {
|
||||
|
||||
elem.style.backgroundImage = "url('" + url + "')";
|
||||
|
||||
} else {
|
||||
elem.setAttribute("src", url);
|
||||
}
|
||||
|
||||
if (browserInfo.animate && !browserInfo.mobile) {
|
||||
if (!elem.classList.contains('noFade')) {
|
||||
fadeIn(elem, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fadeIn(elem, iterations) {
|
||||
|
||||
var keyframes = [
|
||||
{ opacity: '0', offset: 0 },
|
||||
{ opacity: '1', offset: 1 }];
|
||||
var timing = { duration: 200, iterations: iterations };
|
||||
return elem.animate(keyframes, timing);
|
||||
}
|
||||
|
||||
window.ImageStore = {
|
||||
setImageInto: setImageIntoElement
|
||||
};
|
||||
|
||||
window.ImageLoader = {
|
||||
fillImages: fillImages,
|
||||
lazyImage: lazyImage,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue