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

Question

我在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().可悲的是，错误仍然存在。

问候 二.

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);
});

代码笔