通過JS和CSS，實現網頁載入中的動畫效果

阿新 • • 發佈：2019-01-12

需要材料：

一張loading動畫的gif圖片

基本邏輯：

模態框遮罩 + loading.gif動圖，
預設隱藏模態框
頁面開始傳送Ajax請求資料時，顯示模態框
請求完成，隱藏模態框

下面我們通過Django新建一個web應用，來簡單實踐下

實踐

新建一個Django專案，建立應用app01, 配置好路由和static，略。將gif動圖放到靜態資料夾下，結構如下：

檢視中定義一個函式，它返回頁面test.html：

def test(request):
    return render(request, 'test.html')

test.html頁面如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 匯入css樣式 -->
    <link rel="stylesheet" href="/static/css/loading.css">
    <!-- 匯入jquery 和 js檔案 -->
    <script src="/static/plugins/jquery-3.2.1.js" 
></script>
    <script src="/static/js/loading.js"></script>
</head>
<body>

<h1>你好啊，朋友！</h1>
<hr>

<div id="content">
    <p>正在請求伺服器資料....</p>
</div>

<!-- 模態框部分 -->
<div class="loading hide">
    <div class="gif"></div 
>
</div>

</body>
</html>

CSS樣式如下：

/*  模態框樣式 */
.loading {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: black;
    opacity: 0.4;
    z-index: 1000;
}

/* 動圖樣式 */
.loading .gif {
    height: 32px;
    width: 32px;
    background: url('/static/img/loading.gif');
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -16px;
    margin-top: -16px;
    z-index: 1001;
}

說明：

通過設定position: fixed，並令上下左右為0，實現模態框覆蓋整個頁面；
設定gif動態圖為背景，居中，來顯示載入效果；
通過設定z-index值，令gif圖懸浮在模態框上面；
background-color: black;是為了看著明顯，具體使用時可以設為white;

JS檔案如下：

$(function () {
    //準備請求資料，顯示模態框
    $('div.loading').show();

    $.ajax({
        url: "/ajax_handler.html/",
        type: 'GET',
        data: {},
        success: function (response) {
            var content = response.content;
            $('#content').html(content);

            //請求完成，隱藏模態框
            $('div.loading').hide();
        },
        error: function () {
            $('#content').html('server error...');

            //請求完成，隱藏模態框
            $('div.loading').hide();
        }
    })
});

說明：

頁面載入後，開始傳送Ajax請求，從服務端ajax_handler檢視請求資料，這時顯示模態框
請求完成後，不論成功與否，隱藏模態框

ajax_handler檢視如下，它模擬網路延遲，並返回一些字串：

from django.http import JsonResponse
from django.utils.safestring import mark_safe  # 取消字串轉義

def ajax_handler(request):
    # 模擬網路延遲
    import time
    time.sleep(3)

    msg = ''' XXX '''  # 這裡你可以隨便放入一些字串

    return JsonResponse({"content": mark_safe(msg)})

效果如下：

通過JS和CSS，實現網頁載入中的動畫效果

需要材料：一張loading動畫的gif圖片基本邏輯：模態框遮罩 + loading.gif動圖，預設隱藏模態框頁面開始傳送Ajax請求資料時，顯示模態框請求完成，隱藏模態框

用純CSS實現載入中動畫效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"&

用純CSS實現加載中動畫效果

cit one form overflow relative tor -o ica tom HTML <div class="pswp__preloader__icn"> <div class="

實用CSS3實現旋轉載入中動畫

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><style type="t

CSS3實現“正在載入中”動畫

Just some funzies with CSS3 animations. If you are worried about super deep browser support, use a GIF. <div class="loader"> <span></sp

Android使用webview控制元件載入本地html，通過Js與後臺Java實現資料的傳遞

1.在佈局檔案中加WebView控制元件，在java中獲取WebView物件。 2.載入本地html檔案。 3.開啟js功能。 webView.getSettings().setJa

通過純JS和css實現自定義彈出對話方塊

需求：實現通過一個彈出對話方塊來選擇下拉列表中對應值進行引數設定操作，及彈出對話方塊中需要有一個下拉列表輸入和一個確定按鈕即可，要求彈出對話方塊後，背部介面不能夠操作或者被遮蔽灰掉。思路： 1.開始以為so so much simple，毫不猶豫考慮prompt彈出對話

愛創課堂分享“15 個有趣的 JS 和 CSS 庫”，

前端 web劃重點迎來了黃金10 月，在這收獲的季節，我又為你們帶來了哪些新鮮、有趣的前端資源呢？前端開發者們，一起來看看有木有你需要的前端庫。1.DisplayJSDisplayJS 是一個幫助你渲染 DOM 的簡易框架。使用它，你可以更容易地將 JS 變量遍歷到特定的 HTML 元素中，類似

【iOS】通過NSURLProtocol實現網頁載入本地快取資料

一.專案需求專案中有個海報生成功能，使用UIWebView載入一些網頁，因為海報使用率比較高，有時載入網頁比較慢會影響使用者體驗，因此我們在APP啟動後，將一些固定資源，如css、圖片等，先快取到本地。載入網頁時，通過NSURLProtocol，優先使用本地的檔案，以加快網頁載入速

js和css實現手機橫豎屏預覽思路整理

實現效果，如上圖。首先，實現手機頁面在PC端預覽，則先在網上找到一個手機的背景圖片，算好大概內間距，用來放預覽的頁面，我這裡是給手機預覽頁面的尺寸按iphone5的尺寸來的；一個手機頁面在這裡預覽，要通過<iframe>標籤，左邊選擇不同的select選項，通過監

圖片輪播的JS和CSS實現

JS實現方法： //實現自動輪播 function autoMove() { if (n >= (count - 1)) { n = 0; } else { ++n; } $(".body1 .adver ul li").eq(n).trigger("click"); //

mui上拉載入通過ajax獲取資料，實現分頁

上拉重新整理程式碼 $(document).ready(function(){ //上拉載入下拉重新整理 mui.init({ pullRefresh: {

win7下，Ant 配合yuicompressor對js和css進行合併、壓縮、拷貝處理

更新：2015/8/13 【NAnt】 NAnt is a .NET-based build tool. In theory it is kind of like make without make's wrinkles. In practice it's a lot

前端給js和css加上時間戳，清除快取，做版本控制

1.<script type="text/javascript" src="../resources/js/pcWeb/index.js"> 2.<script type="text/javascript" src="../resources/js/pcWeb/index.js?15470

iOS 專案本地匯入html檔案，js和css檔案顯示不出來

最近一直在做h5相關，發現本地html模板匯入進專案後，js和css並顯示不出來然後找了很多資料，發現是路徑的問題一個是 Create groups for any added folders （建立虛擬結構-包結構）一個是 Create folder r

iOS引用本地的html，並且html中引用到本地的js和image的實現流程

1.將html和js,image放在一個資料夾Resource中並且通過瀏覽器可以正常訪問，顯示對應的圖片和js交換。 2.將Resource檔案引入到專案中選擇 3.將Resource改為字尾名.bundle,然後再對應的類中採用以下程式碼進行載入。 webVie

利用 filter 機制給靜態資源 url 加上時間戳，來防止js和css檔案的快取，利於開發除錯

直接上程式碼： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

利用ajax和JSP技術實現網頁中表單的區域性重新整理（只重新整理表單資料，而不重新整理整個頁面）

在web開發中有時有區域性重新整理的需求，這樣做的好處是克服了頁面整體重新整理對網路速度受限的情況。 1.MySQL資料表如下（簡單舉例）：表名：stu_info stuId int PK NN

在Android Studio上使用GSON+VOLLEY，秒處理網路資料成集合。感受框架的力量。搭配RecyclerView和SwipeRefreshLayout，實現底端載入更多，下拉重新整理。

【致謝，引用，宣告，前言】關於GSON和VOLLEY，我百度了很多資料，個人感覺有兩篇部落格介紹的特別好，附上鍊接咯: GSON: http://blog.csdn.net/lk_blog/article/details/7685169 VOLLEY:http://

按需載入JS和css

/*** js和css按需載入 ***/ function loadJsCss(url, callback ){// 非阻塞的載入後面的js會先執行 var isJs = /\/.+\.js($|\?)/i.test(url) ? true : false; fu

通過JS和CSS，實現網頁載入中的動畫效果

需要材料：

基本邏輯：

實踐

相關推薦