LoadingBar.js显示包含在网站中的空白区域

Question

LoadingBar.js显示包含在网站中的空白区域

我想在我的网站上实现LoadingBar.js,

LoadingBar.js是一个用于创建进度条的JS库:https://loading.io/progress/

我测试了一个工作正常的JSFiddle:https://jsfiddle.net/sg2uz3jx/

<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>

<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>

Run Code Online (Sandbox Code Playgroud)

但是当我将它复制/粘贴到我的网站中时,它只是一个空的空间,并没有显示任何东西.以下是我在网站上执行的示例,其中包含源代码突出显示:https: //ibb.co/mLDezU

你知道为什么会那样做吗？

Answer 1

Shi*_*rsz 0

从我在问题中包含的图像中可以看到，您将包含下一个插件库代码：

<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>

Run Code Online (Sandbox Code Playgroud)

在要创建进度条的 html 标记结构内部，即，您正在执行类似以下操作（如果我们假设您创建多个进度条）：

<html>
  <head>
    <!-- Here are your head stylesheets and meta-tags -->
  </head>

  <body>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur</h3>
      <br>
      <!-- Starts the wrong including of the plugin library -->
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
      <!-- Ends the wrong including of the plugin library -->
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur 2</h3>
      <br>
      <!-- Starts the wrong including of the plugin library -->
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
      <!-- Ends the wrong including of the plugin library -->
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

因此，您必须将放在标签plugin styleshet上head（关于此的讨论），并且plugin javascript只将文件放在标签上一次，而不是插件库的先前错误（可能是多次包含） body。就像下一个例子一样：

<html>
  <head>
    <!-- Here are your head stylesheets and meta-tags -->
    <!-- Include stylesheet of loading-bar plugin -->
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
  </head>

  <body>
    <!-- Include Javascript needed for loading-bar plugin -->
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur</h3>
      <br>
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
    <div>
      <h3>Apparence du compteur 2</h3>
      <br>
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      <div class="row">...</div>          
    </div>
    <!-- some code... -->
    <!-- some code... -->
    <!-- some code... -->
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

如果此后错误仍然存在，请检查开发人员控制台以搜索一些错误，并用更准确的解释更新您的问题。

归档时间：	7 年，1 月前
查看次数：	283 次
最近记录：	6 年，6 月前