1.思路:加入很多图片,以延迟加载时间,实现加载完后显示图片。定义一个外层p,覆盖住图片,在内层p中引入加载时显示的图片,让内层p居中在页面上,利用setInterval定时器设置3秒后将外层p隐藏,从而显示图片,达到加载完后显示页面的效果。


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .loading{

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            z-index: 100;

            background: #fff;

        }

        .loading .pic{

            width: 64px;

            height: 64px;

             

            background: url(loading.gif);

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

    </style>

</head>

<body>

<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">

<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">

<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">

<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">

<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    $(function(){

 

        var loading='<p class="loading"><p class="pic"></p></p>';

        $('body').append(loading);

        setInterval(function(){

            $('.loading').fadeOut();

        },3000)

    })

</script>

</body>

</html>

知识点:


p居中:

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

2.思路:利用状态事件监听的方法:onreadystatechange,判断redayState,实现加载完后显示页面的效果


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .loading{

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            z-index: 100;

            background: #fff;

        }

        .loading .pic{

            width: 64px;

            height: 64px;

             

            background: url(loading.gif);

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

    </style>

</head>

<body>

 

<p class="loading">

    <p class="pic"></p>

</p>

<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">

<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">

<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">

<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">

<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    document.onreadystatechange=function(){

        if(document.redayState=='complete'){

            $('loading').fadeOut();

        }

    }

</script>

</body>

</html>

知识点:


通过onreadystatechange事件监听readyState的状态,我们只需要关心最后一个状态'complete',当达到complete状态,说明加载成功。


3.思路:利用CSS3实现动画效果,达到加载 完后显示页面。同样采用onreadystatechange事件监听的方法,不同的是实现了一种动态效果。


利用i标签,加入CSS样式,实现5个间隔开的矩形。利用animation每隔1.2s循环一次,无限循环。每个i标签,延时0.1s在Y方向上伸长缩短,达到动画效果。


<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

        .loading{

            width: 100%;

            height: 100%;

            position: fixed;

            top: 0;

            left: 0;

            z-index: 100;

            background: #fff;

        }

        .loading .pic{

            width: 50px;

            height: 50px;

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            margin: auto;

        }

        .loading .pic i{

            display: block;

            float: left;

            width: 6px;

            height: 50px;

            background: #399;

            margin: 0 2px;

            -webkit-transform: scaleY(0.4);

                -ms-transform: scaleY(0.4);

                    transform: scaleY(0.4);

            -webkit-animation: load 1.2s infinite;

                    animation: load 1.2s infinite;

        }

        .loading .pic i:nth-child(2){

            -webkit-animation-delay: 0.1s;

                    animation-delay: 0.1s;

        }

        .loading .pic i:nth-child(3){

            -webkit-animation-delay: 0.2s;

                    animation-delay: 0.2s;

        }

        .loading .pic i:nth-child(4){

            -webkit-animation-delay: 0.3s;

                    animation-delay: 0.3s;

        }

        .loading .pic i:nth-child(5){

            -webkit-animation-delay: 0.4s;

                    animation-delay: 0.4s;

        }

        @-webkit-keyframes load{

            0%,40%,100%{

                -webkit-transform: scaleY(0.4);

                        transform: scaleY(0.4);

            }

            20%{

                -webkit-transform: scaleY(1);

                        transform: scaleY(1);

            }

        }

        @keyframes load{

            0%,40%,100%{

                -webkit-transform: scaleY(0.4);

                        transform: scaleY(0.4);

            }

            20%{

                -webkit-transform: scaleY(1);

                        transform: scaleY(1);

            }

        }

    </style>

</head>

<body>

 

<p class="loading">

    <p class="pic">

        <i></i>

        <i></i>

        <i></i>

        <i></i>

        <i></i>

    </p>

</p>

<img src="http://img5.imgtn.bdimg.com/it/u=4244789527,2286705620&fm=200&gp=0.jpg">

<img src="http://img5.imgtn.bdimg.com/it/u=4224538646,2973769633&fm=200&gp=0.jpg">

<img src="http://img2.imgtn.bdimg.com/it/u=3965705221,2010595691&fm=27&gp=0.jpg">

<img src="http://img4.imgtn.bdimg.com/it/u=1742626185,2547278809&fm=27&gp=0.jpg">

<img src="http://img0.imgtn.bdimg.com/it/u=3597382613,1842885761&fm=27&gp=0.jpg">

<script type="text/javascript" src="jquery-1.8.2.min.js"></script>

<script type="text/javascript">

    document.onreadystatechange=function(){

        if(document.redayState=='complete'){

            $('loading').fadeOut();

        }

    }

</script>

</body>

</html>

知识点:

1.scale:伸长缩短。scaleX:x方向。scaleY:y方向。

2.infinite:无限循环

3.animate-delay:0.1s 延时0.1s

4.@keyframes 动画名称{

0%{}

100%{}}

TAG: 进度条 css

如果你觉得本文还不错,记得分享哦^-^^-^

相关内容:


广告赞助

你可能喜欢




渝ICP备15000999-1号

共享汽车使用网    star个人博客    小十博客    草根赚钱创业    启明博客    王杭个人博客    逐梦博客    李洁博客    Amals技术博客    破晓博客    雨巷博客    起点终点    lisa小站    网讯it资讯    单职业传奇