Jekyll 未加载图像 Javascript

Jekyll not loading Javascript for an Image

This is my sample site published on GitHub using GitHub pages, using Jekyll. The map you see in the site is supposed to be interactive for all the states, as shown in this fiddle,显示地图的工作原理。

这里使用的主要 Javascript 文件是 jquery.imagemapster.js 我的代码的HEAD是:

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...

</head>

或者您可以简单地查看我的 code present in the repository 用于发布站点。

我尝试过的事情:

  1. 将所有图像和脚本放在名为 asset 的文件夹中,并链接到资源。那根本不起作用。没有显示图像。
  2. 正在将资源放在根文件夹中。这就是我所做的。图像显示正常,但脚本仍然无法运行。
  3. 为了检查链接,我将 4k 行代码复制到头部内的 <script> 标记对中。那也行不通。

最终,使用 Jekyll 的本地站点构建工作完美。我在这里做错了什么?

jquery.imagemapster.js 加载正常,问题在于您加载库的方式:

Mixed Content: The page at 'https://mooncrater31.github.io/infer/#' was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.

这会阻止您的网站在现代和流行的浏览器(又名:Chrome)中使用 JQuery,这就是它在本地运行良好的原因,它在没有 https 的情况下运行。

要解决它,只需使用 HTTPS 加载它们:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">