我在Jquery中的实力不如我想要的强,并且我认为我无法正确理解此错误。我的所有Google搜索几乎都显示了此错误的复杂示例。
如果有人能指出正确的方向来解决以下错误并提供一些背景信息,我将不胜感激。
应该澄清一下,第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。
答案 0 :(得分:5)
使用'$ {function()',而不是使用$(window).load(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);
});