My while loop should, on each iteration, create an img tag, set its src, then add an event listener. This event listener fires on error event, which would be a 404, in the case the is not found. The images are stored in a local file, but I don't know how many files might be in each project folder. Images will be named 1, 2, 3, 4, etc. As soon as an error event has fired on one of the img tags, this will mean we have reached the end of the images for a particular project, and this event listener will change isLooping to false, and the while loop should stop executing at this point. However my browser just enters a state of perpetual loading. No errors in the console but browser will eventually crash. Why is this? I think it's a problem with how I have set up my while loop.

const GalleryProject = (function () {
  const galleryContainer = document.querySelector('.gallery-container')
  let isLooping = true

  function openProject(index = 1) {
    const imagesContainer = document.createElement('div')
    imagesContainer.classList.add('images-container')

    const bigImgTag = document.createElement('img')
    bigImgTag.classList.add('big')

    const smallImgTagContainer = document.createElement('div')
    smallImgTagContainer.classList.add('small-img-container')

    imagesContainer.appendChild(bigImgTag)
    imagesContainer.appendChild(smallImgTagContainer)
    galleryContainer.appendChild(imagesContainer)

    displayProjectInfo(index)
    loadBigImage(index)
    loadSmallImages(index)
  }

  function loadBigImage(index) {
    const bigImg = document.querySelector('img.big')
    bigImg.src = `assets/projects/single-bucket/${index}/main-image.jpeg`
  }

  const smallImgErrorHandler = function () {
    isLooping = false
    this.remove()
  }

  function loadSmallImages(index) {
    const smallImgContainer = document.querySelector('.small-img-container')
    let i = 1
    while (isLooping) {
      const img = document.createElement('img')
      img.addEventListener('error', smallImgErrorHandler)
      img.src = `assets/projects/single-bucket/${index}/${i}.jpeg`
      smallImgContainer.appendChild(img)
      i++
    }
  }

  function displayProjectInfo(index) {
    const textWrapper = document.createElement('div')
    textWrapper.classList.add('project-description-wrapper')

    const title = document.createElement('p')
    title.classList.add('project-title')
    title.textContent = projectData[index - 1].title

    const description = document.createElement('p')
    description.classList.add('project-description')
    description.textContent = projectData[index - 1].description

    textWrapper.appendChild(title)
    textWrapper.appendChild(description)
    galleryContainer.appendChild(textWrapper)
  }

  return { openProject }
})()

GalleryProject.openProject()