'How to remove loader GIF after image load with JavaScript

Can anyone tell me why I'm unable to detect the load event on this image element and set the loading GIF to display: none? I'd like to set the div with the loader class to display: none when the first image loads after the Add Image button is clicked. Right now it only sets the style after I click the Add Doggo button twice.

Here's the code:

HTML:

    <title>image loader</title>
</head>
<body>
    <h1>Dog Images</h1>
    <button class="add-doggo">Add Image</button>
    <div class="doggos">
        <div class="loader"><img src="src/Preloader.gif" /></div>
    </div>

    <script src="src/doggos.js"></script>
</body>

CSS:

.loader {
    display: none;
}

JavaScript:

const DOG_URL = 'https://dog.ceo/api/breeds/image/random';

const doggos = document.querySelector('.doggos');
let loader = document.querySelector('.loader');

let dogImage, isLoaded;

function addNewDoggo() {
    const promise = fetch(DOG_URL);
    promise

        .then(function (response) {
            const processingPromise = response.json(); //This line of code parses the API response into a usuable js object
            return processingPromise; //this code returns a new promise and this process is called | PROCESS-CHAINING
        })
        .then(function (processedResponse) {
            const img = document.createElement('img');
            img.classList.add('dog-image');
            img.src = processedResponse.message;
            img.alt = 'Cute doggo';
            doggos.appendChild(img);
        });
}

document.querySelector('.add-doggo').addEventListener('click', () => {
    dogImage = document.querySelector('.dog-image');
    isLoaded = dogImage?.complete && dogImage?.naturalHeight !== 0;
    if (!isLoaded) {
        loader.style.display = 'block';
        console.log(true);
    } else if (isLoaded) {
        loader.style.display = 'none';
        console.log('IMAGE LOADED');
    }
    return addNewDoggo();
});

// Adding event listener on the image element itself to detect if it's loaded
document.querySelector('.dog-image').addEventListener('load', () => {
    console.log('DOG IMAGE LOADED');
    isLoaded = dogImage?.complete && dogImage?.naturalHeight !== 0;
    if (isLoaded) {
        loader.style.display = 'none';
    }
});
javascripthtmlcss


Solution 1:[1]

Here, as mentioned in a comment, you can clearly see that the first thing I do with the newly created image element is to give it an event handler for the load event. That's really all there is to it AFAIK.

"use strict";
function byId(id){return document.getElementById(id)}
function qsa(sel,parent=document){return parent.querySelectorAll(sel)}
function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onLoaded, false);

function onLoaded(evt)
{
    qsa('button')[0].addEventListener('click', addNewDog, false);
}

const dogUrl = "https://dog.ceo/api/breeds/image/random";

function addNewDog()
{
    qsa('.loader')[0].classList.remove('hidden');
    fetch(dogUrl)
        .then( response => response.json() )
        .then( jsObj =>  {
                    let img = newEl('img');
                    img.addEventListener('load', onUserImgLoaded, false);
                    img.classList.add('dog-image');
                    img.alt = 'cute dog';
                    img.src = jsObj.message;
                    qsa('.doggos')[0].appendChild(img);
                }
            );
}

function onUserImgLoaded(evt)
{
    qsa('.loader')[0].classList.add('hidden');
}
.hidden
{
    display: none;
}
.loader img
{
    max-width: 128px;
}
<h1>Dog Images</h1>
    <button class="add-doggo">Add Image</button>
    <div class="doggos">
        <div class="loader hidden"><img src="https://flevix.com/wp-content/uploads/2020/01/Bounce-Bar-Preloader-1.gif" /></div>
    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 enhzflep

Related Questions