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');
};
};
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');
};
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.