javascript - 网站没有加载所有内容

Question

我的网站没有加载所有内容。这是它在 CodePen 上的样子:https://codepen.io/ArchivalBoat50/full/mWjRqK/

但实际上它是这样的: https://archivalboat50.github.io/marsproject/intro/

我检查了控制台，它说它有一个 HTTPS 错误

这是我的代码:

$(document).ready(function() {
  setTimeout(function() {
    $('.alpha').addClass('in');
  },1000)
   $(".main-button").click(function(event) {
     this.style.transform = "rotate(360deg)";
     
   })
})

@font-face {
  font-family: 'agency';
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot'); /* IE9 Compat Modes */
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.woff') format('woff'), /* Modern Browsers */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/agency_fb-2.svg#7adfd2e465e5a5494cfebbc2416928d9') format('svg'); /* Legacy iOS */
       
  font-style:   normal;
  font-weight:  400;
}


html {
  font-size: 20px
}
body {
  height: 100vh;
  overflow: hidden;
  background-color: #000;
  background-image: url("http://www.newforestobservatory.com/wordpress/wp-content/gallery/starclusters/m56_hsiii_nfo.jpg")
}
.alpha {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: 'agency';
  text-transform: uppercase;
  color: #fff;
  font-weight: 100;
  font-size: 5em;
  transform-origin: center center;
  transform: translate3d(-50%,-50%,0)scale(1.4);
  opacity: 0;
  transition: opacity 4s ease-out, transform 4s ease-out, letter-spacing 4s ease-out, -webkit-filter 3s ease-out, filter 3s ease-out;
  filter: blur(20px);
  -webkit-filter: blur(20px);
  white-space: nowrap;
  &.in {
    transform: translate3d(-50%,-50%,0)scale(1);
    letter-spacing: 0.1em;
    opacity: 1;
    filter: blur(0px);
    -webkit-filter: blur(0px);
  }
}

red-highlight {
  background-color: rgba(255,0,3,0.3);
}

.mars {
  width: 75%;
  display: block;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0);
  animation: mars 30s infinite linear;
}
@keyframes mars {
  0% {
    transform: translate(-50%, 0)rotate(0deg);
  }
  100% {
    transform: translate(-50%, 0)rotate(360deg);
  }
}

.center-element {
  text-align: center;
}

.main-button {
padding: 17px;
background-color: rgba(0, 0, 0,0);
border: 3px solid white;
color: white;
font-weight: bold;
font-size: 16px;
transition: background-color 0.5s, color .5s, transform 1s
}

.main-button:hover {
  background-color: white;
  color: black;
  // transform: rotate(5deg)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="alpha ">  
<h1>
  Welcome to  <span style="background-color:red;">Mars</span>
  </h1>
 <div class="center-element"> 
<a href="https://archivalboat50.github.io/allpagesDavidsGMO/">
  <a href="https://codepen.io/ArchivalBoat50/full/gmQyZQ/" target="_blank"><button type ="button" class= "main-button">CLICK TO BEGIN AN AWESOME JOURNEY</button></a>
   </a>
  </div>
</div>
  <img class="mars" src="http://now.space/wp-content/themes/twentyfifteen/images/planets/mars.png" alt="" />

我该如何解决这个问题？

Answer 1

如果您在实际网站上查看控制台，您会看到有关尝试通过 http 加载不安全脚本的错误，由于此错误，jquery 永远不会被拉入您的网站，这意味着它会在尝试运行时立即中断一些 jquery 代码。

它在 codepen 中工作，因为他们已经从与他们相同的协议(protocol)上的源中提取了它。