H5+JS實作頁面載入動畫-html教學-PHP中文網

首頁

web前端

html教學

H5+JS實作頁面載入動畫

青灯夜游

Jan 27, 2021 pm 07:12 PM

html5javascript頁面載入

本篇文章要為大家介紹HTML5 JavaScript實作頁面載入動畫的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

H5+JS實作頁面載入動畫

（相關教學建議：html教學）

1.使用計時器，每次都要等待。

2.根據頁面載入是否完成，來判斷載入動畫是否退出。

<script>
        document.onreadystatechange=function(){
            console.log(document.readyState);
            if(document.readyState=="complete"){
                $(".loading").fadeOut();
            }
        }        
     </script>

3.以上兩個都是直接使用gif圖，為了讓網頁載入更快，使用css3來製作播放動畫

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3进度条</title>
    <style>
            .loading{width:100%; height: 100%;position: fixed;top:0;left: 0;z-index: 100;background: #ffffff;}
            .loading .pic{
            width: 64px;
            height: 64px;
            /* background: url(images/loading.gif); */
            position: absolute;
            top: 0;
            bottom: 0;
            left:0;
            right:0;
            margin: auto}
 
            .loading .pic i{
                display: block;
                float: left;
                width: 6px;
                height: 50px;
                background: #399;
                margin: 0 2px;
                transform: scaleY(0.4);
                animation: load 1.2s infinite;
            }
            .loading .pic i:nth-child(1){animation-delay:0.1s }
            .loading .pic i:nth-child(2){animation-delay:0.2s }
            .loading .pic i:nth-child(3){animation-delay:0.3s }
            .loading .pic i:nth-child(4){animation-delay: 0.4s}
            .loading .pic i:nth-child(5){animation-delay:0.5s }
 
            @keyframes load{
                0%,40%,100%{transform: scaleY(0.4)}
                20%{transform:scaleY(1) }
            }
    </style>
</head>
<body>
        
        <div>
            <div>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
            </div>
        </div>
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt=""/>
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt=""/>
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt=""/>
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt=""/>
</body>
</html>

效果如下

H5+JS實作頁面載入動畫

4.即時依頁面載入進度，顯示載入百分百

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实时获取加载数据的进度条</title>
    <style>
        .loading {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            background: #ffffff;
        }
 
        .loading .pic {
            width: 100px;
            height: 100px;
            /* background: url(images/loading.gif); */
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            /* border: 1px solid red; */
            font-size: 30px;
            text-align: center;
            line-height: 100px;
        }
 
        .loading .pic span{
            display: block;
            width: 80px;
            height: 80px;
            position: absolute;
            top:10px;
            left: 10px;
            border-radius: 50%;
            box-shadow: 0 3px 0 #666;
            animation: rotate 1s infinite linear;
        }
        @keyframes rotate{
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
            
    </style>
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script>
         $(function(){
             var img=$("img");
             var num=0;
             img.each(function(i){
                 var oImg=new Image();
 
                 oImg.onload=function(){
                     oImg.onload=null;
                     num++;
                     $(".loading b").html(parseInt( num/$("img").size()*100)+"%");
                     if(num>=i){
                         $(".loading").fadeOut();
                     }
                 }
                 oImg.src=img[i].src;
             });       
    })
 
 
    </script>
</head>
 
<body>
    <div>
        <div>
            <span></span>
            <b>0%</b>
        </div>
    </div>
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt="" />
    <img src="/static/imghwm/default1.png"  data-src="http://i1.hdslb.com/bfs/archive/763293ce06bf1e684ef0ea3da43ae5008d8564b8.jpg"  class="lazy"   alt="" />
</body>
 
</html>

效果如下，由於載入過快，就截圖動畫初始頁面。

H5+JS實作頁面載入動畫

所寫的style程式碼可以到這個網址，http://autoprefixer.github.io/ 幫助我們自動適應不同的導覽器。

H5+JS實作頁面載入動畫

更多程式相關知識，請造訪：程式設計影片！！

以上是H5+JS實作頁面載入動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：博客园。如有侵權，請聯絡admin@php.cn刪除

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web開發人員的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構，使用標籤如、等。 2.CSS控製網頁樣式，使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互，通過事件監聽和DOM操作。

HTML，CSS和JavaScript的角色：核心職責Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構，CSS負責樣式和佈局，JavaScript賦予動態交互。三者在網頁開發中各司其職，共同構建豐富多彩的網站。

HTML容易為初學者學習嗎？Apr 07, 2025 am 12:11 AM

HTML適合初學者學習，因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩，易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高，可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML中起始標籤的示例是什麼？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。