milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add unloading capability to the image loader

Browse source
This commit is contained in:
MrTimscampi 2020-04-11 22:51:11 +02:00
parent dd54466c36
commit 343989f610
7 changed files with 49 additions and 259 deletions
Download patch file Download diff file Expand all files Collapse all files

29
src/components/images/imageFetcher.js
View file

@ -2,28 +2,36 @@ define(['dom'], function (dom) {
'use strict';
function loadImage(elem, url) {
if (!elem) {
return Promise.reject('elem cannot be null');
}
if (elem.tagName !== "IMG") {
elem.style.backgroundImage = "url('" + url + "')";
return Promise.resolve();
//return loadImageIntoImg(document.createElement('img'), url).then(function () {
// elem.style.backgroundImage = "url('" + url + "')";
// return Promise.resolve();
//});
}
return loadImageIntoImg(elem, url);
}
function unloadImage(elem) {
if (!elem) {
return Promise.reject('elem cannot be null');
}
var url;
if (elem.tagName !== "IMG") {
url = elem.style.backgroundImage.slice(4, -1).replace(/"/g, "");
elem.style.backgroundImage = 'none';
} else {
url = elem.getAttribute("src");
elem.setAttribute("src", "");
}
return Promise.resolve(url);
}
function loadImageIntoImg(elem, url) {
return new Promise(function (resolve, reject) {
dom.addEventListener(elem, 'load', resolve, {
once: true
});
@ -32,7 +40,8 @@ define(['dom'], function (dom) {
}
return {
loadImage: loadImage
loadImage: loadImage,
unloadImage: unloadImage
};
});

38
src/components/images/imageLoader.js
View file

@ -3,40 +3,36 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings',
var self = {};
function fillImage(elem, source, enableEffects) {
if (!elem) {
throw new Error('elem cannot be null');
function fillImage(entry) {
if (!entry) {
throw new Error('entry cannot be null');
}
if (!source) {
source = elem.getAttribute('data-src');
}
var source = entry.target.getAttribute('data-src');
if (!source) {
return;
if (entry.intersectionRatio > 0 && source) {
fillImageElement(entry.target, source);
} else if (!source) {
emptyImageElement(entry.target);
}
fillImageElement(elem, source, enableEffects);
}
function fillImageElement(elem, source, enableEffects) {
function fillImageElement(elem, source) {
imageFetcher.loadImage(elem, source).then(function () {
if (enableEffects !== false) {
fadeIn(elem);
if (userSettings.enableFastFadein()) {
elem.classList.add('lazy-image-fadein-fast');
} else {
elem.classList.add('lazy-image-fadein');
}
elem.removeAttribute("data-src");
});
}
function fadeIn(elem) {
if (userSettings.enableFastFadein()) {
elem.classList.add('lazy-image-fadein-fast');
} else {
elem.classList.add('lazy-image-fadein');
}
function emptyImageElement(elem) {
imageFetcher.unloadImage(elem).then(function (url) {
elem.setAttribute("data-src", url);
});
}
function lazyChildren(elem) {