[메모] lazy loading with intersectionObserver, 로더, localstorage

const loadLazyImages = (entries, observer) => {
	entries.forEach(function (entry) {
		if (entry.isIntersecting) {
			console.log('loadLazyImages', entry.target.dataset.src, 'fetch data');

			let lazyImage = entry.target;
			lazyImage.src = lazyImage.dataset.src;
			// lazyImage.srcset = lazyImage.dataset.srcset;
			lazyImage.classList.remove('lazy');
			observer.unobserve(lazyImage);
		}
	});
	console.log('entries', entries, observer);
};

const lazyOptions = {
	threshold: 1,
	trackVisibility: true,
	delay: 200,
};

let lazyImageObserver = new IntersectionObserver(loadLazyImages, lazyOptions);

const registerImagesToLazyObserver = (lazyImages, lazyImageObserver) => {
	lazyImages.forEach(function (lazyImage) {
		lazyImageObserver.observe(lazyImage);
	});
};
window.cats.lazyImageObserver = lazyImageObserver;
window.cats.registerImagesToLazyObserver = registerImagesToLazyObserver;

• localStorage

	window.Storage.prototype.setObj = function (key, obj) {
		return this.setItem(key, JSON.stringify(obj));
	};
	window.Storage.prototype.getObj = function (key) {
		return JSON.parse(this.getItem(key));
	};

	const setObjtoLocal = (k, v) => {
		return window.localStorage.setObj(k, v);
	};

	const getObjfromLocal = (k, v) => {
		return window.localStorage.getObj(k, v);
	};

• loader

class Loader {
	$loader = null;
	data = {
		visible: false,
	};

	constructor({ $target, data, setLoading }) {
		this.$loader = document.createElement('section');
		$target.appendChild(this.$loader);
		this.data = data;
		this.setLoading = setLoading;

		this.render();
		this.$loader.onclick = () => this.toggleLoader(false);
		console.log('[CREATED]', 'LOADER', this.isLoading);
	}

	setState(nextData) {
		this.data = nextData;
		this.render();
		console.log('[UPDATE]', 'Loading', nextData);
	}

	toggleLoader(visible) {
		this.setState({ visible });
	}

	render() {
		const { visible = false } = this.data;
		if (visible) {
			this.$loader.innerHTML = `
                <div class="loader-wrapper"> 
                    <div class="loader"></div>
                </div>
            `;
		} else {
			this.$loader.innerHTML = '';
		}
	}
}