首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >当我从浏览器控制台禁用javascript时,预加载器图标不会隐藏

当我从浏览器控制台禁用javascript时,预加载器图标不会隐藏
EN

Stack Overflow用户
提问于 2019-07-17 22:58:56
回答 1查看 37关注 0票数 0

预加载器图标的编码使用HTML,CSS和Javascript,但当我从浏览器控制台禁用javascript时,它不会隐藏,因为当google爬行到索引页面时,它将禁用javascript和CSS。没有javascript和CSS的预加载器有没有其他的解决方案?请帮帮我。

我的Html:

代码语言:javascript
代码运行次数:0
运行
复制
<div id="loader-wrapper">
            <div id="loader">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>

CSS:

代码语言:javascript
代码运行次数:0
运行
复制
#loader-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background: #fff;
overflow: hidden;
}
#loader {
width: 90px;
height: 65px;
position: relative;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
#loader ul {
margin: 0;
list-style: none;
width: 90px;
    width: 90px;
position: relative;
padding: 0;
height: 10px;
}
#loader ul li {
position: absolute;
width: 2px;
height: 0;
background-color: #f1582a;
bottom: 0;
}
@keyframes sequence1 {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
@keyframes sequence2 {
0% {
height: 20px;
}
50% {
height: 65px;
}
100% {
height: 20px;
}
}
#loader li:nth-child(1) {
left: 0;
animation: sequence1 1s ease infinite 0;
}
#loader li:nth-child(2) {
left: 15px;
animation: sequence2 1s ease infinite 0.1s;
}
#loader li:nth-child(3) {
left: 30px;
animation: sequence1 1s ease-in-out infinite 0.2s;
}
#loader li:nth-child(4) {
left: 45px;
animation: sequence2 1s ease-in infinite 0.3s;
}
#loader li:nth-child(5) {
left: 60px;
animation: sequence1 1s ease-in-out infinite 0.4s;
}
#loader li:nth-child(6) {
left: 75px;
animation: sequence2 1s ease infinite 0.5s;
}

JS:

代码语言:javascript
代码运行次数:0
运行
复制
    function prealoader () {
if ($('#loader').length) {
  $('#loader').fadeOut(); // will first fade out the loading animation
  $('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
  $('body').delay(350).css({'overflow':'visible'});
};
}
EN

回答 1

Stack Overflow用户

发布于 2019-07-17 23:11:04

您可以使用动画SVG图标来进行动画处理。

票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57078869

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档