# Intersection Observer API 實作

# Html

<img class="lazyload lazy-hidden" data-src="test.jpg" />

	function onElementObserved (entries, observer) {
	entries.forEach((entry) => {
	if (!entry.isIntersecting) {
	return;
	}

	const img = entry.target;

	if (img.dataset.src) {
	img.setAttribute('src', img.dataset.src);
	img.removeAttribute('data-src');
	img.addEventListener('load', () => {
	img.classList.remove('lazy-hidden');
	img.classList.add('lazy-show');
	})
	}

	observer.unobserve(img);
	}
	);

	var observer = new IntersectionObserver(onElementObserved);

	var lazyImages = document.querySelectorAll('img.lazyload');
	lazyImages.forEach((image) => {
	this.observer.observe(image)
	});

	img.lazyload {
	transition: opacity 550ms ease-in;
	}

	img.lazyload.lazy-hidden {
	opacity: 0;
	}

	img.lazyload.lazy-show {
	opacity: 1;
	}