如何讓網頁真正的 loading?

五条悟

2.8k2390803

发布于
2017-09-25

想請問如何讓網頁在整個網頁還沒有完成讀取之前
我能夠出現div寫說loading...
等到網頁讀取完之後div再消失？

php css3 css3动画 jquery javascript

阅读 4.8k

6 个回答

路易港

✓ 已被采纳

实现的办法有很多种，给你写个简单DEMO，你先理解其中的原理，然后把相关的内容替换一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Loading Demo</title>

    <style>
        .none {
            display: none;
        }
    </style>
</head>
<body>

<!--加载动画-->
<div id="loading" class="loading"><p>内容加载中</p> <p>3秒后消失</p></div>

<!--实际网页内容-->
<div id="page" class="page none">我是网页内容</div>

<script>
    var $page = document.getElementById('page'),
        $load = document.getElementById('loading');

    // 这个定时器的作用就是模拟网页内容加载完成
    setTimeout(function () {
        // 显示网页内容
        $page.style.display = 'block';

        // 隐藏或者移除加载动画
        $load.style.display = 'none';
    }, 3000)
</script>
</body>
</html>

把代码拷出来，放在HTML文件跑一下咯。

程序媛花花

1.7k53655

发布于
2017-09-25

html

<body  class="is-loading">
<div class="curtain">
    <div class="loader">
        loading...
    </div>
</div> 
 <div>
   <!--这里 正文 -->
</div>  
</body>

style


.loader {
    position: fixed;
    left: 50%;
    top: 50%;
    margin: -0.2em 0 0 -0.2em;
    text-indent: -9999em;
    border-top: 0.3em solid rgba(0, 0, 0, 0.1);
    border-right: 0.3em solid rgba(0, 0, 0, 0.1);
    border-bottom: 0.3em solid rgba(0, 0, 0, 0.1);
    border-left: 0.3em solid #555;
    -moz-transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -moz-animation: loader 300ms infinite linear;
    -webkit-animation: loader 300ms infinite linear;
    animation: loader 300ms infinite linear;
    -moz-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.loader,
.loader:after {
    border-radius: 50%;
    width: 2em;
    height: 2em;
}

.curtain {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    -moz-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    z-index: 0;
    overflow: hidden;
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes loader {
    0% {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.is-loading {
    overflow: hidden;
}

.is-loading .curtain {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
    z-index: 99;
}

.is-loading .loader {
    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity: 1;
}

 window.onload=function(){
  
     $('body').removeClass('is-loading');  
 }

例子

seth-shi

1.8k11928

发布于
2017-09-25

如果你的问题不是别的意思的话，可能就是大清要完了。
回归正题。
你可以在页面上放一个占满屏幕的 CSS3 动画或者一张 gif 动图。注意设置 z-index 为最高而且放在所有 DOM 元素之前以确保最先加载
然后监听事件

window.onload = function(){
     // 这里就是加载好的时候，把动画移除掉
}

Tlean

374

发布于
2017-09-25

汝事一css3动画，于入之时见此动画...

刺刺desu

312

发布于
2017-09-25

设置一个布尔值来控制请求完之后停止

APIII

11612

发布于
2017-09-26

//显示正在加载提示信息

    loading: function (jq) {
        return jq.each(function () {
            var opts = $.data(this, "hiMallDatagrid").options;

            if (opts.loadMsg) {
                /*  显示正在加载提示信息
                */
                var html = ["<tbody><tr style='display:none;'><td colspan=" + opts.columns[0].length + "></td></tr></tbody>"];
                if ($("#loadAjax").length === 0) {
                    html.push("<tr id='loadAjax'><td style='height:100px;text-align:center;' colspan='" + opts.columns[0].length.toString() + "'><img src=''></td></tr>");
                }
                $(jq).find("tbody").remove();
                $(jq).append(html.join(""));
            }
        });
    },
    //清除加载提示信息  
    loaded: function (jq) {
        return jq.each(function () {
            /* 清除加载提示信息
            */
            $("#loadDiv", $(jq)).remove();
        });
    },
    
    
    望采纳！

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

如何讓網頁真正的 loading?

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

两个promise问题？

Vue项目一个报错无法找到原因?

如何在JavaScript中从外部中断for循环的执行？

如何在浏览器开发者工具中导入本地JS文件并直接运行？

Quartz如何根据cron表达式计算任务开始前发送通知的时间？