Question

我正在尝试在我的网站上实现LoadingBar.js。

我测试了一个运行良好的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>

但是，当我将其复制/粘贴到我的网站内时，它只会留下一个空白空间，并且什么也不会显示。这是在我的网站中使用突出显示的源代码的示例：

您知道为什么会这么做吗？

Answer 1

根据我在the image you included in the question中看到的内容，您将包括下一个插件库代码：

<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>

要在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>

因此，您必须将plugin styleshet放在head标签（Discussion about this）和{{上，而不是之前的插件库错误（可能包括多个错误）中， 1}}文件仅在plugin javascript标记上一次。像下面的例子一样：

body

如果在此之后错误仍然存在，请检查开发者控制台以查找一些错误，并使用更精确的解释来更新您的问题。

Answer 2

您的代码段可以在Vivaldi（看起来像您正在使用）上运行，并且可以在Chrome上正常运行。如果没有页面的其余代码，很难说为什么它不为您显示。尝试暂时一个接一个地删除可能会干扰load-bar.js的所有其他脚本，然后从那里重新进行工作。或发布完整的页面代码以进行进一步的分析.....

LoadingBar.js包含在网站中时显示空白

2 个答案: