How to Properly Interrupt the Download of a Background Image Using JavaScript

Question

In a similar vein to a previous question (link), I'm dealing with dynamic changes to background images in my web application. However, unlike the scenario discussed in the linked question, where the concern was whether both images would be downloaded when CSS rules are overwritten, I'm facing a different challenge: how to effectively interrupt the download of a previous background image.

This is what i tried:

// Function to cancel image request
function cancelRequest(element) {
    if (imageRequests.has(element)) {
        const controller = imageRequests.get(element);
        controller?.abort(); // Abort the ongoing request
        imageRequests.delete(element);
    }
}

// Usage example:
// Create a new AbortController instance for each element
const controller = new AbortController();
// Cancel any ongoing request for this image
cancelRequest(elementToChangeBackground);
// Store the element and its AbortController
imageRequests.set(elementToChangeBackground, controller);

I attempted to use the AbortController interface to cancel the download of the previous background image. However, despite implementing the provided solution, I found that the previous image download isn't being interrupted as expected.

---

My specific question is: is there a more effective or alternative approach to canceling the download of a background image in JavaScript? Additionally, is there any insight into why the provided implementation might not be working as intended?

I'd greatly appreciate any guidance, suggestions, or alternative methods that could help me achieve the desired behavior. Thank you for your assistance!