HTML如何设置加载样式？loading伪类的作用是什么？

html不直接设置加载样式，需通过css定义视觉效果并结合javascript控制显隐；2. 常见做法是预置加载元素，用css定义动画和隐藏样式，再通过javascript动态添加或移除显示类名来触发加载状态；3. 示例中通过showloading()和hideloading()函数控制加载层的显示与隐藏，并利用过渡动画实现平滑效果；4. 优化加载体验可采用骨架屏模拟内容结构，提升用户感知性能；5. 渐进式渲染可优先加载关键内容，提升交互速度；6. 标准css中无:loading伪类，实际开发中通过javascript管理isloading状态，并绑定到dom类名或属性来响应加载状态变化，实现灵活控制。

在HTML中，我们通常不会直接“设置”加载样式，因为HTML本身是结构语言，它描述的是页面内容。加载样式，或者说加载动画和状态的展示，主要是通过CSS来定义视觉效果，并结合JavaScript来控制这些效果的出现和消失，以响应页面的加载状态或异步数据的获取。至于

:loading

解决方案

要实现加载样式，核心在于利用CSS的动画能力和JavaScript对DOM元素的动态操作。

一个常见的做法是：

立即学习“前端免费学习笔记（深入）”；

1. 准备加载指示器：在HTML中预置一个用于显示加载状态的元素，比如一个

   div

   ，里面可以放一个旋转的图标（spinner）或文字。
2. CSS定义样式和动画：使用CSS为这个加载元素定义初始样式（比如默认隐藏），以及加载时需要显示的样式和动画（比如旋转动画）。
3. JavaScript控制显隐：当页面开始加载数据、发送异步请求或处理耗时操作时，通过JavaScript给这个加载元素添加一个特定的类名（例如

   is-loading

   ），使其显示并播放动画；当数据加载完成或操作结束后，移除这个类名，使其隐藏。

举个简单的例子：

<div id="app-content">
    <!-- 你的主要内容会加载到这里 -->
    <p>这里是页面的主要内容，等待数据加载...</p>
</div>

<div id="loading-spinner" class="hidden">
    <div class="spinner"></div>
    <p>加载中，请稍候...</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/xiazai/code/10717" title="魔法映像企业网站管理系统"><img
                                                                                src="https://img.php.cn/upload/webcode/000/000/013/176344020398619.jpg" alt="魔法映像企业网站管理系统"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/xiazai/code/10717" title="魔法映像企业网站管理系统">魔法映像企业网站管理系统</a>
                                                                        <p>技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作</p>
                                                                </div>
                                                                <a href="/xiazai/code/10717" title="魔法映像企业网站管理系统" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
</div>

<style>
    /* 加载指示器容器 */
    #loading-spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        /* 默认隐藏 */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #loading-spinner.visible {
        opacity: 1;
        visibility: visible;
    }

    /* 旋转的spinner */
    .spinner {
        border: 4px solid rgba(0, 0, 0, 0.1);
        border-top: 4px solid #3498db; /* 蓝色 */
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    .hidden {
        display: none !important; /* 初始隐藏，JavaScript控制 */
    }
</style>

<script>
    const loadingSpinner = document.getElementById('loading-spinner');
    const appContent = document.getElementById('app-content');

    function showLoading() {
        loadingSpinner.classList.remove('hidden');
        // 强制回流以确保transition生效
        void loadingSpinner.offsetWidth;
        loadingSpinner.classList.add('visible');
    }

    function hideLoading() {
        loadingSpinner.classList.remove('visible');
        loadingSpinner.addEventListener('transitionend', function handler() {
            loadingSpinner.classList.add('hidden');
            loadingSpinner.removeEventListener('transitionend', handler);
        }, { once: true });
    }

    // 模拟数据加载
    showLoading();
    setTimeout(() => {
        appContent.innerHTML = '<p>数据加载完成！这里是新的内容。</p>';
        hideLoading();
    }, 2000); // 假设2秒后数据加载完成
</script>

这个示例展示了如何通过JavaScript来控制加载指示器的显示和隐藏。当数据开始加载时调用

showLoading()

hideLoading()

优化网页加载体验：不仅仅是显示一个加载动画

当我们在谈论“加载样式”时，往往不止是让用户看到一个转圈的图标那么简单。更深层次的，是关于如何优化用户在等待内容出现时的感知体验。仅仅显示一个加载动画，如果等待时间过长，用户依然会感到沮丧。因此，我们应该从多个维度去思考。

一个非常有效的策略是“骨架屏”（Skeleton Screen）。它不是一个简单的加载指示器，而是在内容实际加载出来之前，先用占位符（通常是灰色块）来模拟页面内容的布局结构。这给用户一种“内容正在逐步呈现”的感觉，而不是面对一个空白页或一个孤零零的加载动画。这种方式能显著降低用户的焦虑感，因为他们能预见到即将出现的内容结构，提升了页面的“感知性能”。实现骨架屏通常需要更复杂的CSS和HTML结构，可能还需要在服务器端渲染（SSR）或构建时预渲染（Prerendering）一部分骨架内容。

此外，渐进式渲染（Progressive Rendering）也是一个重要的概念。这意味着页面内容不是一次性全部加载完成，而是分阶段逐步呈现。比如，先加载页面的关键部分（如头部导航、主要内容区域的文本），再逐步加载图片、视频等非关键资源。这让用户可以更快地开始与页面进行交互，即使所有内容尚未完全加载完毕。

:loading

伪类：概念与实际开发中的替代方案

正如前面所提到的，

:loading

<video>

<audio>

在实际开发中，我们完全依赖JavaScript来管理“加载中”的状态。最常见的模式是：

1. 基于数据请求的状态管理：当发起一个API请求时，我们会在请求开始前设置一个布尔型的状态变量（例如

   isLoading = true

   ），并在请求成功或失败后将其设置为

   false

   。
2. DOM类名或属性绑定：然后，这个

   isLoading

   状态变量会驱动DOM元素上的类名或

   data-

   属性的切换。
   • 例如，如果

     isLoading

     为

     true

     ，就给某个容器元素添加一个

     is-loading

     的CSS类：

     <div class="content is-loading">...</div>

     。
   • 或者使用

     data-loading

     属性：

     <div data-loading="true">...</div>

     。
3. CSS响应状态变化：CSS规则会监听这些类名或属性的变化，并应用相应的样式。

/* 当父元素有is-loading类时，显示加载指示器并隐藏内容 */
.content.is-loading .loading-indicator {
    display: block;
}

.content.is-loading .actual-content {
    display: none;
}

这种模式非常灵活且强大，它允许我们精确控制何时显示加载状态、显示哪种加载状态，以及如何响应不同的加载阶段（例如，数据加载中、图片加载中、组件异步加载中）。这比一个固定的

:loading