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.

Hmm, normally this is a dependency issue which can be caused by the order in which libraries are loaded. In this particular case I am not sure. — Stefan, Jun 20 '18 at 10:22
Possible duplicate of ["Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project](https://stackoverflow.com/questions/38871753/uncaught-typeerror-a-indexof-is-not-a-function-error-when-opening-new-foundat) — Stefan, Jun 20 '18 at 10:24
As the dup's says, you should try: `$(window).on('load', function(){ ...});` — Stefan, Jun 20 '18 at 10:24
Thanks for the input. :) Sadly, I have tried `$(window).on('load', function()`, The error persists. No change. — Lewis, Jun 20 '18 at 10:26

score 13 · Accepted Answer · answered Jun 20 '18 at 10:22

13

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

answered Jun 20 '18 at 10:22

Supun Praneeth

3,087
2
30
33

1

This has resolved the error, many thanks for the input. I'm now off to do a little light reading. :) – Lewis Jun 20 '18 at 10:34
3

Note that since jQuery 3.4.1, this is [now deprecated](https://github.com/jquery/jquery-migrate/blob/master/warnings.md#jqmigrate-ready-event-is-deprecated). Using one of jQuery's API methods to bind a "ready" event, e.g. `$( document ).on( "ready", fn )`, will cause the function to be called when the document is ready, but only if it is attached before the browser fires its own `DOMContentLoaded` event. – Denis G. Labrecque Aug 07 '19 at 15:16

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

1 Answers1