IntersectionObserver test

by phloe

HTML

<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/816/459"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/832/468"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/848/477"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="image" data-src="//fillmurray.com/800/450"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>
<div class="space"></div>

CSS

.image {
	margin-top: 10px;
	position: relative;
	width: 50%;
}
.image > * {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}
.image:after {
	content: "";
	display: block;
	padding-bottom: 56.25%;
}

.space {
	min-height: 400px;
	margin-top: 10px;
	background-color: #EfE;
}

JavaScript

var imageLoader = new IntersectionObserver(
  imageLoad,
  { rootMargin: "100%" } 
);



function imageLoad (changes) {
	changes.forEach(function (changeRecord) {
		 var element = changeRecord.target;
		element.isVisible = isVisible(changeRecord.boundingClientRect, changeRecord.intersectionRect);
		if ('isVisible' in element) {
			var img = new Image();
			img.src = element.getAttribute("data-src");
			element.appendChild(img);
			imageLoader.unobserve(element);
		}
		else {
			/*
			// Transitioned from visible to hidden
			if ('visibleTimeout' in element) {
				clearTimeout(element.visibleTimeout);
				delete element.visibleTimeout;
			}
			*/
		}
	});
}

function isVisible(boundingClientRect, intersectionRect) {
  return ((intersectionRect.width * intersectionRect.height) /
          (boundingClientRect.width * boundingClientRect.height) >= 0.5);
}

var images = Array.prototype.slice.call(document.querySelectorAll(".image"));
images.forEach(function (image) {
	imageLoader.observe(image);
});