javascript - 预加载页面适用于所有主流浏览器,但 Safari 除外
问题描述
我有一个预加载页面,在网页完全加载到客户端浏览器之前显示 CSS 动画。它适用于 Chrome、Firefox 和 Internet Explorer,但无法在 Safari 中运行。甚至 CSS 命令在 Safari 中也无法正常工作,我不知道为什么!
当我在 Safari 中打开它时,第一个问题是动画无法正常工作。我什至添加了@-webkit-keyframes,但它并没有改变任何东西。但更奇怪的是,javascript 代码也不起作用。例如,即使我指定不应再滚动正文,我仍然可以向下滚动它。我想这是javascript的跨浏览器问题,但我无法弄清楚它到底是什么。是因为我正在使用事件“加载”吗?也许 Safari 不认识它?
我想用 jQuery 重写代码,但我找不到 window.addEvenListener("load",callback()); 的等价物。在 jQuery 中。事件监听器 .load() 已被弃用。
更新:问题似乎是 Safari 没有正确执行溢出:隐藏。有谁知道这个问题的任何解决方法?
这是MVC
document.body.style.overflow = "hidden";
setTimeout(() => {
window.addEventListener('load', loaded());
}, 5000);
function loaded(){
document.getElementById('loading').style.display = 'none';
document.body.style.overflowY = 'visible';
}
#loading {
display: block;
width: 100vw;
height: 100vh;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
z-index: 10;
}
#flex_wrapper{
position: relative;
width: 100%;
top: calc(50% - 50px);
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
#loading_text{
width: 100%;
font-size: 1.2em;
font-weight: 400;
position: relative;
top: calc(50% - 30px);
height: 50px;
text-align: center;
line-height: 25px;
}
.loading_bar{
width: 8px;
height: 50px;
background-color: black;
margin: 0 5px;
border-radius: 10px;
animation: loading 1s infinite;
}
@keyframes loading{
0%{
height: 0px;
}
50%{
height: 50px;
}
100%{
height: 0px;
}
}
.loading_bar:nth-child(2){
animation-delay: 0.1s;
}
.loading_bar:nth-child(3){
animation-delay: 0.2s;
}
.loading_bar:nth-child(3){
animation-delay: 0.3s;
}
.loading_bar:nth-child(4){
animation-delay: 0.4s;
}
.loading_bar:nth-child(5){
animation-delay: 0.5s;
}
.loading_bar:nth-child(6){
animation-delay: 0.6s;
}
.loading_bar:nth-child(7){
animation-delay: 0.7s;
}
.loading_bar:nth-child(8){
animation-delay: 0.8s;
}
.loading_bar:nth-child(9){
animation-delay: 0.9s;
}
.loading_bar:nth-child(10){
animation-delay: 1s;
}
<div id="loading">
<div id="flex_wrapper">
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
<div class="loading_bar"></div>
</div>
<div id="loading_text">
Please wait<br> Loading...
</div>
</div>
解决方案
嗯,终于找到问题了!
问题是这overflow: hidden;
还不足以停止在 iOS 上滚动。相反,您应该阻止事件的默认操作touchmove
使滚动变得不可能。这是我的 JavaScript 代码的更正版本,适用于桌面和移动浏览器:
<script language="javascript" type="text/javascript">
disableScroll();
document.body.style.overflowY = "hidden";
window.addEventListener("load", function(){
document.getElementById("loading").style.display = "none";
document.body.style.overflowY = "visible";
enableScroll();
});
function preventDefault(e){
e.preventDefault();
}
function disableScroll(){
document.body.addEventListener('touchmove', preventDefault, { passive: false });
}
function enableScroll(){
document.body.removeEventListener('touchmove', preventDefault, { passive: false });
}
</script>
这个想法的功劳归功于这篇文章
推荐阅读
- android - 如何使用 TypeScript 在 React Native 中编写正确的 `Keyboard.addListener`?
- c++ - 如何从 Terralang 扩展 C++ 类?
- database - 如何使用经典 ASP 将图像插入 Access 数据库
- c# - 更改文本文件时需要吐司/模式
- javascript - 如何多次调用javascript函数?
- java - NoSuchElementException:使用 hasNextLine 找不到行
- vue.js - 根据循环内的条件呈现不同的组件
- python - 是否有另一种方法来打印多个列表元素,其中列表索引每次打印都会增加给定数量?
- c++ - 如何检测第一次 Windows 启动?
- python - 在 Schema 定义后注册一个 post_load 钩子?