https://winchestercollegeatwar.com/Scripts/ImageLoadManager.js

1
2/*****************
3Delays the loading of images until they are visible on the screen.
4Images must have the attribute "data-image-url".
5Images should not have their "src" set.
6Images will have the following classes applied during the loading process: loading, loaded, load-error
7*****************/
8
9if(typeof(sds) === "undefined") sds = {};
10
11sds.imageLoadManager = function(){
12
13    var _imageCheckTimeout = null;
14    
15    function _isElementVisible(element) {
16        var boundingRect = element.getBoundingClientRect();
17        var documentHeight = (window.innerHeight || document.documentElement.clientHeight);
18        var documentWidth = (window.innerWidth || document.documentElement.clientWidth);
19
20        return (
21            // On screen horizontally
22            (boundingRect.left >= 0 && boundingRect.right <= documentWidth)
23            // Either bottom or top is on the screen
24            && ( (boundingRect.top >= 0 && boundingRect.top <= documentHeight)
25            || (boundingRect.bottom >= 0 && boundingRect.bottom <= documentHeight))
26            );
27    }
28
29    function _checkImages(){
30        // Get all of the unloaded images
31        var unloadedImages = document.querySelectorAll("img[data-image-url]:not(.loading):not(.loaded):not(.load-error)");
32    
33        // Check whether any of the images are now visible
34        for (var i = 0; i < unloadedImages.length; i++) {
35          var imageContainer = unloadedImages[i];
36          if (_isElementVisible(imageContainer)) {
37            // The element is now visible so load its image
38            imageContainer.classList.add("loading");
39            imageContainer.src = imageContainer.getAttribute("data-image-url");
40          }
41        }
42    };
43
44    var scheduleImageCheck = function(){
45        if (_imageCheckTimeout != null) {
46          clearTimeout(_imageCheckTimeout);
47        }
48    
49        _imageCheckTimeout = setTimeout(_checkImages, 200);
50    };
51
52	return {
53		scheduleImageCheck: scheduleImageCheck
54	};
55
56}();
57
58$(document).ready(function(){
59    $("img[data-image-url]").each(function(){
60
61        this.onload = function () {
62            this.classList.add("loaded");
63            this.classList.remove("loading");
64        };
65      
66        this.onerror = function () {
67            this.classList.add("load-error");
68            this.classList.remove("loading");
69        };
70    });
71});
72
73$(window).on("DOMContentLoaded load resize scroll", sds.imageLoadManager.scheduleImageCheck);