如何在使用 JavaScript 加載圖像后刪除加載器 GIF

Question

誰能告訴我為什么我無法檢測到此圖像元素上的加載事件並將加載 GIF 設置為display: none ？ 我想用加載器 class 設置 div 以display: none單擊“ Add Image按鈕后加載第一個圖像時無。 現在它只在我點擊兩次 Add Doggo 按鈕后設置樣式。

這是代碼：

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';
    }
});

Answer 1

在這里，正如評論中提到的，您可以清楚地看到我對新創建的圖像元素所做的第一件事是為其提供加載事件的事件處理程序。 這真的就是它的全部 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>

如何在使用 JavaScript 加載圖像后刪除加載器 GIF

問題描述

1 個解決方案

解決方案1
0 已采納 2022-04-29 21:36:29

如何在使用 JavaScript 加載圖像后刪除加載器 GIF

問題描述

1 個解決方案

解決方案1 0 已采納 2022-04-29 21:36:29

解決方案1
0 已采納 2022-04-29 21:36:29