JS检测图像元素src更改并加载

Question

I'm building a portfolio website with an image gallery. The active gallery image is loaded by changing the src and alt of the image element, rather than loading a new image element and removing the old one.

I've got everything working except a loading icon for when the active image changes. I've tried using Javascript to display the icon when a thumbnail is clicked and then hiding it onLoad, but that isn't working.

Can anyone advise how best to detect when the image src has changed and the new image src has fully loaded? I've copied my full JS below if it helps. The function for the loader icon is at the very bottom.

I'm using basic JavaScript so ideally want to stay away from any jQuery solutions if possible. Thanks!

    var galleryCloseIcon = document.getElementById('galleryClose');
    var galleryLoader = document.getElementById('galleryLoader');
    var galleryNext = document.getElementById('galleryNext');
    var galleryPrevious = document.getElementById('galleryPrevious');
    var galleryViewer = document.getElementById('galleryViewer');
    var galleryViewerBg = document.getElementById('galleryViewerBg');
    var galleryViewerExpand = document.getElementById('galleryViewerExpand');
    var galleryViewerImage = document.getElementById('galleryViewerImage');
    var imageNodes = document.querySelectorAll('.gallery__image');

    var imageIndex = 0;

    //Loop through images to find image index
        var indexLoop = function() {
        for (var i = 0; i < imageNodes.length; i++) {
            var thumbimage = imageNodes[i].src.split("-thm")[0] + ".jpg";
            if (thumbimage === galleryViewerImage.src) {
                imageIndex = i;
            }
        }
    };

    // Open Gallery
    var galleryOpen = function() {

        // Open gallery viewer
        galleryViewer.classList.add('gallery__viewer--open');
        indexLoop();

    };

    // Open gallery fullscreen on desktop
    var galleryOpenDesk = function() {
        galleryViewer.classList.add('gallery__viewer--open-desk');
    };

    // Close gallery
    var galleryClose = function() {
        galleryViewer.classList.remove('gallery__viewer--open');
        galleryViewer.classList.remove('gallery__viewer--open-desk');
    };

    // Get image data
    var imageData = function(item) {
        imageLoader(item);
        galleryViewerImage.alt = item.alt;

        // Get image src by removing -thm suffix from thumbnails
        var galleryViewerLarge = item.src.split("-thm")[0] + ".jpg";
        galleryViewerImage.src = galleryViewerLarge;
    };

    // Functions for image event listeners
    var imageClick = function() {
        var $this = this;
        imageData($this);
        galleryOpen();
    };

    // Add event listeners to images
    for (var i = imageIndex; i < imageNodes.length; i++) {
        imageNodes[i].addEventListener("click", imageClick);
    }

    // Next / previous buttons
    var changeImage = function(n) {
        if (n > imageNodes.length -1) {
            imageIndex = 0;
        } else if (n < 0) {
            imageIndex = imageNodes.length -1;
        } else {
            imageIndex = n;
        }
        imageData(imageNodes[imageIndex]);
        return imageIndex;
    };

    var imageNext = function() {
        changeImage(imageIndex + 1);
    };
    var imagePrevious = function() {
        changeImage(imageIndex -1);
    };

    // Loading image spinner
    var imageLoader = function(image) {
        galleryLoader.classList.add('gallery__viewer-icon--loader-on');
        image.onload = function() {
            galleryLoader.classList.remove('gallery__viewer-icon--loader-on');
        };
    };

Answer 1

Figured it out. Instead of checking if the active image had loaded, I was checking if the node had loaded. If it's of use to anyone, the loader function should have been this;

    var imageLoader = function(image) {
    galleryLoader.classList.add('gallery__viewer-icon--loader-on');
    galleryViewerImage.onload = function() {
        galleryLoader.classList.remove('gallery__viewer-icon--loader-on');
    };
};