진행률 표시줄이 로드된 후 페이지를 표시하는 방법-CSS 튜토리얼-php.cn

1. 아이디어: 로딩 시간을 지연시키고 로딩 후 사진을 표시하기 위해 사진을 많이 추가하세요. 그림을 덮을 외부 레이어 p를 정의하고 내부 레이어 p에 로드할 때 표시되는 그림을 삽입하고 내부 레이어 p를 페이지 중앙에 배치하고 setInterval 타이머를 사용하여 3초 후에 외부 레이어 p를 설정한 다음 외부 레이어를 숨깁니다. 레이어 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=&#39;<p class="loading"><p class="pic"></p></p>&#39;;
        $(&#39;body&#39;).append(loading);
        setInterval(function(){
            $(&#39;.loading&#39;).fadeOut();
        },3000)
    })
</script>
</body>
</html>

로그인 후 복사

지식 포인트:

p 센터링:

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

로그인 후 복사

아이디어: 상태 이벤트 모니터링 방법 사용: onreadystatechange, 판단 redayState 및 이후 페이지 표시 효과 달성 loading

<!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==&#39;complete&#39;){
            $(&#39;loading&#39;).fadeOut();
        }
    }
</script>
</body>
</html>

로그인 후 복사

알아두어야 할 점:

onreadystatechange 이벤트를 통해 ReadyState 상태를 모니터링하면 'complete' 상태에 도달하면 로딩이 성공한 것입니다.

아이디어: CSS3를 사용하여 애니메이션 효과를 얻고 로딩 후 페이지를 표시합니다. onreadystatechange 이벤트를 모니터링하는 동일한 방법이 사용되지만 차이점은 동적 효과가 달성된다는 것입니다.

i 태그를 사용하고 CSS 스타일을 추가하여 5개의 간격을 둔 직사각형을 만듭니다. 애니메이션을 사용하여 1.2초마다 반복하고 무한 반복합니다. 각 i 태그는 애니메이션 효과를 얻기 위해 0.1초의 지연으로 Y 방향으로 늘어나고 짧아집니다.

100

101

<!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==&#39;complete&#39;){
            $(&#39;loading&#39;).fadeOut();
        }
    }
</script>
</body>
</html>