ImgLazyLoadingJavascript/lazyload.js at main · 9D-Tony/ImgLazyLoadingJavascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var dataSrcStrings = new Array();
var imgElementsArray = new Array();
var elementBoundingBoxes = new Array();

window.onload = function () {
    //lazy load images in works section
    //get img elements by id
    getImagesinElements(["image"]);
    getElementBoundingBoxes(["#image"]);

};


function checkArrayisString(stringArray) {
    return stringArray.every(i => (typeof i === "string"));
}

function getElementBoundingBoxes(elementStringArray)
{
    if(checkArrayisString(elementStringArray))
    {
        for(let i = 0;i < elementStringArray.length; i++)
        {
            elementBoundingBoxes.push(document.querySelector(elementStringArray[i]))
        }
    }
}

function updateBoundaries(elementBoundingBoxes)
{
    for(let i = 0;i < elementBoundingBoxes.length; i++)
    {
        elementBoundingBoxes[i].getBoundingClientRect();
    }

}

function getImagesinElements(arrayOfStrings)
{
    if(checkArrayisString(arrayOfStrings))
    {
        for(let s = 0;s < arrayOfStrings.length; s++)
        {
            var dataSourceElements = document.getElementById(arrayOfStrings[s]).querySelectorAll('[data-src]');
            var imgElements = document.getElementById(arrayOfStrings[s]).getElementsByTagName('img');
            dataSrcStrings.push([]);
            imgElementsArray.push([]);
            for(let e = 0;e < dataSourceElements.length; e++)
            {

                dataSrcStrings[s].push(dataSourceElements[e].dataset.src);
                imgElementsArray[s].push(imgElements[e]);
            }
        }

        console.log(imgElementsArray);
        console.log(dataSrcStrings);

    }
}

document.addEventListener('scroll', function(e) {

    lastKnownScrollPosition = window.scrollY;
    //lastKnownScrollPosition = window.scrollY - 1100;  Add offset to see the effect more clearly

    if(elementBoundingBoxes)
    {
        updateBoundaries(elementBoundingBoxes); // update the element boundaries

        for(let b = 0; b < elementBoundingBoxes.length; b++)
        {
            bounding = elementBoundingBoxes[b].getBoundingClientRect();
            if(bounding.bottom < (window.innerHeight + lastKnownScrollPosition || document.documentElement.clientHeight + lastKnownScrollPosition))
            {

                for(let i = 0;i < imgElementsArray.length; i++)
                {
                    for(let c = 0;c < imgElementsArray[b].length; c++)
                    {
                        var elementsLength = imgElementsArray[b].length - 1;
                        var childObject = imgElementsArray[b][c];
                        var dataSrcImage = dataSrcStrings[b][c];

                        //if the last item in innerImages is not null and has a string
                        // assume that the rest of the images have also been loaded so skip all
                        //used as an optimization.
                        if(imgElementsArray[b][elementsLength].src && imgElementsArray[b][elementsLength].src !== "")
                        {
                            break;
                        }

                        if(!childObject.src || childObject.src === "")
                        {
                            childObject.src = dataSrcImage;
                        }
                    }
                }

            }else
            {

            }

        }
    }

});