网络请求时Loading Spinner不工作问题求助（附完整代码）

你的加载Spinner无法正常工作的核心问题是：点击按钮后你立刻执行了 memeContainer.innerHTML = '';，这会直接清空整个容器，而Spinner是这个容器的子元素，被一并删除了。后续再操作Spinner的类名已经没有意义，因为元素本身已经不存在了。

调整DOM结构，将Meme内容和Spinner分离，单独用一个容器存放Meme内容，这样清空时只会移除内容，保留Spinner元素。

修改后的完整代码 #

HTML #

新增memeContent容器来存放动态渲染的Meme内容，Spinner保留在memeContainer内：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Generator</title>
    <link rel="icon" type="image/x-icon" href="/TrollFace.png">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
    <div class="container">
        <header>
            <h1>Meme Generator</h1>
        </header>
        <main>
            <button class="button-5" id="generateMemeBtn" role="button">Generate Meme</button>
            <div id="memeContainer">
                <div id="loadingSpinner" class="spinner hidden"></div>
                <!-- 新增内容容器 -->
                <div id="memeContent">
                    <h1>Hello there👋 !!</h1>
                    <img src="./hi-hello.gif" alt="">
                </div>
            </div>
        </main>
    </div>
</div>
    <script src="script.js"></script>
</body>
</html>

JavaScript #

修改清空和渲染逻辑，只操作memeContent容器，不再改动整个memeContainer：

document.addEventListener('DOMContentLoaded', () => {
    const generateMemeBtn = document.getElementById('generateMemeBtn');
    const loadingSpinner = document.getElementById('loadingSpinner');
    const memeContent = document.getElementById('memeContent');

    generateMemeBtn.addEventListener('click', memeApi);

    function memeApi() {
        // 显示Spinner
        loadingSpinner.classList.remove('hidden');
        // 清空内容容器而非整个Meme容器
        memeContent.innerHTML = '';

        const url = 'https://meme-api.com/gimme/15';

        fetch(url)
            .then(data => data.json())
            .then(data => {
                const randomIndex = Math.floor(Math.random() * data.count);
                const meme = data.memes[randomIndex];
                
                // 隐藏Spinner并渲染Meme内容
                loadingSpinner.classList.add('hidden');
                memeContent.innerHTML = `
                    <h2>${meme.title}</h2>
                    <img src="${meme.url}" alt="${meme.author}">
                `;
            })
            .catch(error => {
                console.error('Error fetching meme:', error);
                loadingSpinner.classList.add('hidden');
                memeContent.innerHTML = '<p>Sorry, something went wrong. Please try again later.</p>';
            });
    } 
});

CSS（无需修改） #

原CSS样式保持不变，Spinner的绝对定位会相对于memeContainer居中显示。

• 防止重复点击：在显示Spinner时禁用按钮，请求完成后再启用：

  // 显示Spinner时
  generateMemeBtn.disabled = true;
  // 请求完成/失败后
  generateMemeBtn.disabled = false;
  

• 增强Spinner视觉效果：给Spinner添加半透明背景遮罩，修正居中偏移：

  .spinner {
      position:absolute;
      top: 50%;
      left: 50%;
      z-index: 100;
      width: 48px;
      height: 48px;
      border: 5px solid #FFF;
      border-bottom-color: #FF3D00;
      border-radius: 50%;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
      /* 新增样式 */
      background-color: rgba(0,0,0,0.3);
      padding: 10px;
      transform: translate(-50%, -50%);
  }
  

内容的提问来源于stack exchange，提问作者Harshvardhan pipariya