https://www.elgaronline.com/assets/shared/ze49061c8/js/dist/imageLazyLoader.js

1'use strict';
2
3//Image Lazy Loader
4runOnDomLoaded(function () {
5	lazyLoadImagesNearViewPort();
6	jQuery(document).scroll(function () {
7		lazyLoadImagesNearViewPort();
8	});
9	jQuery('.c-Drawer__content').scroll(lazyLoadImagesNearViewPort);
10	jQuery('.ui-accordion-icons').click(function () {
11		setTimeout(lazyLoadImagesNearViewPort, 500);
12	});
13	jQuery('.image-wrapper button[data-xsl-identifier=figure-popover], .image-wrapper button[data-xsl-identifier=table-popover]').click(function (event) {
14		setTimeout(function () {
15			var imageUrl = jQuery(event.target).parent().find('pf-box img')[0].getAttribute('data-image-src');
16			var img = jQuery('img[data-image-src="' + imageUrl + '"]');
17			for (var i = 0; i < img.length; i++) {
18				loadLazyImage(img[i], imageUrl);
19			}
20		}, 100);
21	});
22});
23
24// Adapted from https://www.javascripttutorial.net/dom/css/check-if-an-element-is-visible-in-the-viewport/
25function isInViewport(element) {
26	var rect = element.getBoundingClientRect();
27	var windowInnerHeight = window.innerHeight || document.documentElement.clientHeight;
28	return rect.top > 0 && rect.top <= windowInnerHeight || // top of the image being visibile
29	rect.bottom > 0 && rect.bottom <= windowInnerHeight // bottom of the image being visible
30	;
31}
32
33function loadLazyImage(image, imageSrc) {
34	image.setAttribute('src', imageSrc);
35	image.removeAttribute('data-image-src');
36	image.classList.remove('lazy-load');
37}
38
39function lazyLoadImagesNearViewPort() {
40	var lazyLoadableImages = document.querySelectorAll('.lazy-load');
41
42	if (lazyLoadableImages) {
43		lazyLoadableImages.forEach(function (image) {
44			var imageSrc = image.getAttribute('data-image-src');
45			if (imageSrc && isInViewport(image)) {
46				loadLazyImage(image, imageSrc);
47			}
48		});
49	}
50}