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 images

Browse source
This commit is contained in:
Luke Pulverenti 2016-04-25 14:33:17 -04:00
parent 8379939279
commit 0bdb63bcff
8 changed files with 34 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

82
dashboard-ui/bower_components/emby-lazyload-image/lazyload-image.html vendored
View file

@ -1,8 +1,8 @@
<script>
//require(['imageFetcher'], function (imageFetcher) {
// window.ImageFetcherLazyloadImage = imageFetcher;
//});
require(['imageFetcher'], function (imageFetcher) {
window.ImageFetcherLazyloadImage = imageFetcher;
});
/**
* <lazyload-image>
@ -16,83 +16,25 @@
'use strict';
var FALLBACK_IMAGE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAEElEQVR42gEFAPr/AP///wAI/AL+Sr4t6gAAAABJRU5ErkJggg==';
var DEFAULT_OFFSET = 0;
// create prototype from HTMLImageElement
var LazyloadImagePrototype = Object.create(HTMLImageElement.prototype);
function fadeIn(elem) {
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 imgObserver(that, mutations) {
mutations.forEach(function (mutation) {
if (mutation.attributeName != 'src') {
return;
}
var src = that.src;
if (src && src != FALLBACK_IMAGE) {
if (!that.loadingSrc) {
that.src = FALLBACK_IMAGE;
that.loadingSrc = src;
ImageFetcherLazyloadImage.loadImage(that, src);
} else {
that.loadingSrc = null;
}
} else if (!src) {
that.src = FALLBACK_IMAGE;
}
});
}
// lifecycle callbacks
LazyloadImagePrototype.createdCallback = function () {
var that = this;
if (window.ImageFetcherLazyloadImage) {
// swap original src attribute
this.original = this.currentSrc || this.src;
this.src = FALLBACK_IMAGE;
var observer = new MutationObserver(function (mutations) {
imgObserver(that, mutations);
});
// pass in the target node, as well as the observer options
observer.observe(this, { attributes: true, childList: false, characterData: false });
this.observer = observer;
}
};
//LazyloadImagePrototype.attachedCallback = function () {
//LazyloadImagePrototype.createdCallback = function () {
//};
LazyloadImagePrototype.detachedCallback = function () {
LazyloadImagePrototype.attachedCallback = function () {
if (this.observer) {
// later, you can stop observing
this.observer.disconnect();
var original = this.currentSrc || this.src;
if (original && window.ImageFetcherLazyloadImage) {
//console.log(original);
this.src = FALLBACK_IMAGE;
console.log('loading ' + original);
ImageFetcherLazyloadImage.loadImage(this, original);
}
};
return document.registerElement('lazyload-image', {