Pre-Loader uncaught error "e.indexOf - is not a function."

Question

I'm not as strong in Jquery as I would like to be and I don't think I understand this error properly. Almost all of my google searches are turning up complex examples of this error.

If anyone could point me in the right direction in resolving the following error and providing a little context, I would be grateful.

Should probably clarify, line : 565 is where my script starts. $(window).load(function()

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

Regards, B.

Answer 1

Instead of using $(window).load(function() use '$(function()'. because some element might not loaded when load function triggered.

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