« Back to Index

Doesn’t work: preload images so we can check when background images are loaded via CSS

View original Gist on GitHub

preload.js

    function preload (srcArray) {
        var len = srcArray.length;
        var imgs = new Array(len);
        var count = 0;

        for (var i=0; i<len; i++) {
            imgs[i] = new Image();
            imgs[i].src = srcArray[i];
            imgs[i].onload = function(){
                count++;
                if (count === 6) {
                    complete();
                }
            };
        }

        function complete(){
            console.log('images preloaded');
            var lis = document.querySelector('.experiences').getElementsByTagName('li');
            var list = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];

            for (var i = 1; i < lis.length; i++) {
                // Replace the class value with the relevant Array index value
                // e.g. 'b invisible' should be just 'b'
                // there are more eloquent ways to achieve this but required a fair bit of extra code and I was going for speed over beautiful code
                lis[i].className = list[i];
            }

            console.log(lis);
        }

        console.log(imgs);
    }
    
    preload([
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-1.jpg",
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-2.jpg",
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-3.jpg",
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-4.jpg",
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-5.jpg",
        "http://192.168.0.40/~stormcreative/Assets/Images/experience-6.jpg"
    ]);