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

我正在建立一个带有图片库的投资组合网站。通过更改image元素的src和alt来加载活动的gallery图像，而不是加载新的image元素并删除旧的image元素

我已经让一切工作，除了加载图标时，活动图像的变化。我曾尝试使用Javascript在单击缩略图时显示图标，然后在加载时隐藏它，但这不起作用

有谁能建议如何最好地检测图像src何时已更改，以及新图像src何时已完全加载？如果有帮助的话，我已经在下面复制了我的完整JS。加载器图标的功能位于最底部

我使用的是基本的JavaScript，所以如果可能的话，我希望远离任何jQuery解决方案。谢谢

    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');
        };
    };

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\uuuu image'）；
var指数=0；
//循环浏览图像以查找图像索引
var indexLoop=函数（）{
对于（var i=0；iimageNodes.length-1）{
imageIndex=0；
}else if（n<0）{
imageIndex=imageNodes.length-1；
}否则{
imageIndex=n；
}
imageData（imageNodes[imageIndex]）；
返回图像索引；
};
var imageNext=函数（）{
changeImage（图像索引+1）；
};
var imagePrevious=函数（）{
changeImage（图像索引-1）；
};
//加载图像微调器
var imageLoader=函数（图像）{
galleryLoader.classList.add（'gallery_uuViewer-icon--loader on'）；
image.onload=函数（）{
galleryLoader.classList.remove（'gallery_uuViewer-icon--loader on'）；
};
};

找到了答案。我没有检查活动映像是否已加载，而是检查节点是否已加载。如果它对任何人都有用，那么加载函数应该是这样的

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