html函数如何制作骨架屏加载 html函数延迟加载内容的占位

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html函数如何制作骨架屏加载 html函数延迟加载内容的占位

2025-10-15

浏览次数：次

返回列表

骨架屏通过HTML、CSS和J*aScript实现，在数据加载时展示页面结构占位，提升用户体验。1. 使用带类名的HTML元素构建骨架结构；2. 用CSS设置背景动画模拟加载效果；3. J*aScript模拟异步请求并替换为真实内容；4. 可封装函数动态生成多个骨架项，实现复用。最终实现先结构后内容的流畅加载体验。

html函数如何制作骨架屏加载 html函数延迟加载内容的占位

在网页加载过程中，为了提升用户体验，可以使用“骨架屏”作为内容的占位符，等数据加载完成后再替换为真实内容。这可以通过纯 HTML 结合 CSS 和 J*aScript 实现。下面介绍如何用一个简单的 HTML 函数式思路来创建骨架屏和延迟加载内容。

什么是骨架屏？

骨架屏（Skeleton Screen）是在页面数据尚未加载完成时，提前展示出页面结构的灰色占位图，比如标题、段落、图片的位置等。相比传统的 loading 提示，它更直观地告诉用户接下来会看到什么。

用 HTML + CSS 创建骨架元素

你可以通过定义一些带有特定类名的 HTML 元素，配合 CSS 动画来模拟骨架屏效果。

示例：文章列表的骨架结构

<div class="skeleton-item">
  <div class="skeleton-*atar"></div>
  <div class="skeleton-content">
    <div class="skeleton-title"></div>
    <div class="skeleton-paragraph"></div>
  </div>
</div>

CSS 样式定义视觉效果和动画：

.skeleton-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  border-bottom: 1px solid #eee;
}
<p>.skeleton-*atar {
width: 50px;
height: 50px;
background: #f0f0f0;
border-radius: 50%;
}</p><p>.skeleton-content {
flex: 1;
}</p><p>.skeleton-title,
.skeleton-paragraph {
height: 16px;
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
border-radius: 4px;
}</p><p>.skeleton-title {
width: 60%;
margin-bottom: 8px;
}</p><p>.skeleton-paragraph {
width: 100%;
}</p><p>@keyframes loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}

J*aScript 控制延迟加载内容

使用 J*aScript 模拟异步请求，并在加载完成后替换骨架屏为真实内容。

假设我们有一个容器：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

<div id="content-container">
  <!-- 骨架屏占位 -->
  <div class="skeleton-item">...</div>
  <div class="skeleton-item">...</div>
</div>

然后通过 JS 延迟加载真实数据：

function loadContent() {
  // 模拟网络请求延迟
  setTimeout(() => {
    const container = document.getElementById('content-container');
<pre class="brush:php;toolbar:false;">// 替换为真实内容
container.innerHTML = `
  <article>
    <h3>这是真实的文章标题</h3>
    <p>这里是文章的正文内容，已经成功加载。</p>
  </article>
  <article>
    <h3>第二篇文章标题</h3>
    <p>另一段加载完成的内容。</p>
  </article>
`;

}, 2000); // 模拟 2 秒延迟 }

// 页面加载后启动 document.addEventListener('DOMContentLoaded', loadContent);

封装成可复用的“函数式”结构

虽然 HTML 本身没有“函数”，但可以用 J*aScript 封装生成骨架屏的逻辑：

function createSkeleton(count = 1) {
  let skeletonHTML = '';
  for (let i = 0; i < count; i++) {
    skeletonHTML += `
      <div class="skeleton-item" key="${i}">
        <div class="skeleton-*atar"></div>
        <div class="skeleton-content">
          <div class="skeleton-title"></div>
          <div class="skeleton-paragraph"></div>
        </div>
      </div>
    `;
  }
  return skeletonHTML;
}
<p>// 使用方式
document.getElementById('content-container').innerHTML = createSkeleton(3);</p><p>// 然后加载真实数据再替换
setTimeout(replaceWithRealData, 2000);

基本上就这些。通过组合 HTML 结构、CSS 视觉样式和 J*aScript 控制加载流程，就能实现流畅的骨架屏体验。关键在于先展示结构，再填充内容，让用户感觉更快更顺滑。

以上就是html函数如何制作骨架屏加载 html函数延迟加载内容的占位的详细内容，更多请关注其它相关文章！

# 完成后 # 外贸网站建设推广价格高 # 建设网站包维护 # 汕头外贸seo推广 # 西安餐饮网站建设 # seo内容优化跳出率 # 怎么建设自助下单网站 # 寻甸抖音营销推广有用吗 # 龙华seo舞蹈 # 榆林网站关键词优化排名 # 富源网站建设概况图 # 可以用 # 多个 # 就能 # 你可以 # html # 是在 # 这是 # 复用 # 显示效果 # 加载 # html元素 # 延迟加载 # ai # js # java # javascript # css # html函数