按需加载标签内容，例如 Youtube？

Question

我想在我的网站上添加标签，当用户点击它们而不是在页面加载时加载。当我打开网站时，整个标签内容会立即加载。当用户喜欢 Youtube 之类的内容时，我想加载另一个选项卡的内容。当您在您的频道上打开一个频道时，您会看到视频、播放列表、社区等标签。当用户点击它们时它们会加载。我试图在互联网上找到很多东西都找不到解决方案。我是这方面的菜鸟。有人可以帮我吗？

Answer 1

有多种方法可以解决这个问题：

从我的头顶，这里有几个方法：

1. 使用引导程序可切换选项卡。这将是最简单的解决方案。但是，所有代码都将位于同一页面上。 (来源: https://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp) asdsad

2. 另一种使用 JavaScript 库或框架的方法，该库或框架适用于 React/Vue/Angular 等单页应用程序并使用一些路由。但是，如果它只是几个标签，这将是矫枉过正

3. 使用一些 JavaScript AJAX 调用自行构建。将数据放在某个 JSON 文件中。 Onclick 每个按钮/选项卡使用 AJAX/fetch 或类似的东西获取它并呈现内容。

以下是您如何使用引导解决方案：

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  <li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
  <div id="menu2" class="tab-pane fade">
    <h3>Menu 2</h3>
    <p>Some content in menu 2.</p>
  </div>
</div>

Answer 2

您要实现的目标称为延迟加载。基本上你加载你的主要内容并避免加载一些内容直到需要它。为了实现这一点，您必须为要在服务器上立即加载的内容生成 HTML，并为您打算延迟加载的内容生成一些容器。假设您的选项卡的内容被包装到一些容器中，例如：

<div class="lazy-load-container" id="your-api-function">
</div>

你有一些标签，比如

<span onclick="yourJSFunctionToRequestTheContent('your-api-function')">Lazy Load</span>

所以，你需要实现你的yourJSFunctionToRequestTheContent，比如

function yourJSFunctionToRequestTheContent(functionName) {
    //Request function name
    //which will return the HTML you will need in the div having the name passed as functionName
    //in the callback set the innerHTML of your div to the HTML you have received as an answer
}