JS檢測圖像元素src更改並加載

Question

我正在建立帶有圖片庫的作品集網站。 通過更改圖像元素的src和alt來加載活動的畫廊圖像，而不是加載新的圖像元素並刪除舊的圖像元素。

除了活動圖像更改時的加載圖標外，我一切正常。 我嘗試使用Javascript在單擊縮略圖時顯示圖標，然后將其隱藏在onLoad上，但這不起作用。

任何人都可以建議如何最好地檢測圖像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');
        };
    };

Answer 1

弄清楚了。 我沒有檢查活動映像是否已加載，而是在檢查節點是否已加載。 如果任何人都可以使用它，則加載程序功能應該就是這個；

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