jquery - 预加载器未捕获错误 "e.indexOf - is not a function."

Question

我对 Jquery 的了解没有我希望的那么强大，而且我认为我没有正确理解这个错误。我几乎所有的谷歌搜索都出现了这个错误的复杂例子。

如果有人能指出正确的方向来解决以下错误并提供一点上下文，我将不胜感激。

可能应该澄清一下，第 565 行是我的脚本开始的地方。 $(窗口).load(函数()

>// From the console
>
>(jquery-3.3.1.min.js:2)
>
> *Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load  at index.html:565*

<!-- Loader Script -->
$(window).on('load', function() {
  setTimeout(function() {
    $("body").addClass("hidden")
  }, 100);
  setTimeout(function() {
    $(".preloader").addClass("end")
  }, 1800);
  setTimeout(function() {
    $(".global-overlay").addClass("show")
  }, 1900);
  setTimeout(function() {
    $("body").removeClass("hidden")
  }, 2300);
});

.no-js #loader {
      display: none;
    }

    /*Negative delay values skip rather than pause.*/

    .row1 .left,
    .row1 .right {
      animation-delay: -0s;
      /*Obviously not needed*/
    }

    .row2 .left,
    .row2 .right {
      animation-delay: -0.5s;
    }

    .row3 .left,
    .row3 .right {
      animation-delay: -1s;
    }

    .row4 .left,
    .row4 .right {
      animation-delay: -1.5s;
    }

    /**/

    .left,
    .right {
      height: 6px;
      width: 90px;
      background-color: #333;
      border-radius: 10px;
      position: absolute;
    }

    .left {
      left: 0px;
      animation: left 2s infinite;
      background-color: #9cc320;
    }

    .right {
      right: 0px;
      animation: right 2s infinite;
    }

    .row1,
    .row2,
    .row3,
    .row4 {
      position: relative;
    }

    .row1 {
      top: 0px;
    }

    .row2 {
      top: 26px;
    }

    .row3 {
      top: 52px;
    }

    .row4 {
      top: 78px;
    }

    @keyframes left {
      0%,
      50%,
      100% {
        width: 90px;
      }
      25% {
        width: 170px;
      }
      75% {
        width: 10px;
      }
    }

    @keyframes right {
      0%,
      50%,
      100% {
        width: 90px;
      }
      25% {
        width: 10px;
      }
      75% {
        width: 170px;
      }
    }

    .preloader {
      z-index: 999;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #ededed;
      -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
      -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
      -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
      -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
      transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.4s;
    }

    .preloader::before,
    .preloader::after {
      content: '';
      left: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      position: absolute;
    }

    .preloader::before {
      z-index: 2;
      background: #ddd;
      -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
      -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
      -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
      -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
      transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.1s;
    }

    .preloader::after {
      z-index: 1;
      background: #ccc;
      -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
      -moz-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
      -ms-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
      -o-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
      transition: all 1s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;
    }

    .preloader.end {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
    }

    .preloader.end::before {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
    }

    .preloader.end::after {
      -webkit-transform: translateY(-100%);
      -moz-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
      -o-transform: translateY(-100%);
      transform: translateY(-100%);
    }

    .preloader .loader {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 84px;
      z-index: 3;
    }

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- // Preloader -->
<div class="preloader">
  <div class="loader">
    <div class="row1">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="row2">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="row3">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="row4">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</div>

EDIT 20 / 6 / 18

I have amended script code to, $(window).on('load', function(). Sadly the error persists.

问候， B.

Answer 1

不要使用 $(window).load(function() 使用 '$(function()'。因为加载函数触发时某些元素可能不会加载。

$(function() {
  setTimeout(function() {
    $("body").addClass("hidden")
  }, 100);
  setTimeout(function() {
    $(".preloader").addClass("end")
  }, 1800);
  setTimeout(function() {
    $(".global-overlay").addClass("show")
  }, 1900);
  setTimeout(function() {
    $("body").removeClass("hidden")
  }, 2300);
});

codepen