Inconsistency to show thief colours on different pages or even same page

Question

so I have been trying to implememnt clour thief with the help of ChatGPT to get the dominant colour of several images and then display that colour as a shadow below the images. SOmetimes it works, sometimes now. There are often iregularities/inconsistencies when it coes to shadows being displayed. This is a testing site so only me using it: I can clear all browser caches, Wesbite caches (Lietespeed cache), visit the website and not see the shadows beng appied. I have 3 pages so I go through them one by one, could be that 2 out of the three use the shadows and few minutes later its the other way around. Or, I am on one page with some smaller avatar images and some (ina widget) get the shadows applied but the main images not. Even weirder, if I stay on that page I saw that even the shadows for the widget images disappeared after 20 seconds or so...

Is there any explanation for these irregularities/inconsistencies? Would love to make the shadows applied every single time without any issue. For the code I have been trying to use see below.

Any suggestion is appreciated :)

With help of ChatGPT I use this code in the head section via a WP code snippet plugin:

<!-- Include Color Thief library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/color-thief.min.js"></script>

<script>
  function applyShadowToAvatars() {
    // Get all avatar elements on the member directory page
    const directoryAvatars = document.querySelectorAll('.item-avatar .avatar');

    // Iterate over each avatar on the directory page
    directoryAvatars.forEach((avatarElement) => {
      applyShadowToAvatar(avatarElement);
    });

    // Check if it's the profile page
    const isProfilePage = window.location.href.includes('/members/');

    if (isProfilePage) {
      // Get the avatar element on the profile page
      const profileAvatar = document.querySelector('#item-header-avatar img');

      // Apply shadow to the avatar on the profile page
      applyShadowToAvatar(profileAvatar);
    }

    // Get all avatar elements in the activity feed
    const activityAvatars = document.querySelectorAll('.activity-avatar .avatar');

    // Iterate over each avatar in the activity feed
    activityAvatars.forEach((avatarElement) => {
      applyShadowToAvatar(avatarElement);
    });
  }

  function applyShadowToAvatar(avatarElement) {
    // Get user ID from the image URL
    const userIdMatch = /avatars\/(\d+)\//.exec(avatarElement.getAttribute('src'));
    if (!userIdMatch) return;

    const userId = userIdMatch[1];

    // Create an image element
    const image = new Image();

    // Set the image source to trigger loading
    image.src = avatarElement.getAttribute('src');

    // Event handler for image load
    image.onload = function () {
      // Create Color Thief instance
      const colorThief = new ColorThief();

      // Get dominant color from the image
      const dominantColor = colorThief.getColor(image, 8, 2);

      // Log the dominant color to the console
      console.log('Dominant Color for User ' + userId + ':', dominantColor);

      // Apply a simple shadow color to the image
      const shadowColor = `rgba(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]}, 0.5)`;

      // Set the box-shadow style for the avatar
      avatarElement.style.boxShadow = `0 4px 10px 0 rgba(18,43,70,.12), 0 0 0 2px var(--bb-content-border-color), 0 10px 20px ${shadowColor}`;

      console.log('Shadow Applied for User ' + userId + ':', avatarElement.style.boxShadow);
    };
  }

  // Run the function after a short delay to ensure the DOM is fully loaded
  setTimeout(applyShadowToAvatars, 700);
</script>