1
0
Fork 0
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:
Luke Pulverenti 2016-01-16 13:29:08 -05:00
parent a08a1c37ec
commit ad1f82dbaf
17 changed files with 570 additions and 347 deletions

View file

@ -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,