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

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

1 个答案: