预加载程序未捕获的错误“e.indexOf - 不是函数”。

Posted 2023-03-06

【中文标题】预加载程序未捕获的错误“e.indexOf - 不是函数”。

【英文标题】：Pre-Loader uncaught error "e.indexOf - is not a function."

【发布时间】：2018-11-29 10:34:52

【问题描述】：

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

如果有人能指出正确的方向来解决以下错误并提供一些背景信息，我将不胜感激。

应该澄清一下，第 565 行是我的脚本开始的地方。 $(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>

编辑 20 / 6 / 18

我已将脚本代码修改为$(window).on('load', function()。遗憾的是错误仍然存​​在。

问候， B.

【问题讨论】：

嗯，通常这是一个依赖问题，可能是由加载库的顺序引起的。在这种特殊情况下，我不确定。

"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project的可能重复

正如 dup 所说，您应该尝试：$(window).on('load', function() ...);

感谢您的意见。 :) 可悲的是，我试过$(window).on('load', function()，错误仍然存​​在。没有变化。

【参考方案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

【讨论】：

这已经解决了错误，非常感谢您的输入。我现在要去做一点轻松的阅读。 :)

请注意，从 jQuery 3.4.1 开始，这是now deprecated。使用 jQuery 的 API 方法之一来绑定“就绪”事件，例如$( document ).on( "ready", fn )，将导致在文档准备好时调用该函数，但前提是在浏览器触发自己的 DOMContentLoaded 事件之前附加该函数。