頁面loading提示效果

時間  2019-11-24
標籤 頁面 loading 提示 效果 简体版
原文   原文鏈接

前言：html

如今作頁面通常爲了提示友好點，通常會作個頁面正在加載的loading提示效果，當頁面加載完畢後再顯示內容！這個時候就須要監控頁面的資源加載的狀況，有時候這並很差作，由於頁面涉及圖片，視頻，已經js等等資源。因此咱們在作loading的時候能夠採用模擬的狀況，適當給頁面加載必定時間的loading提示！node

這裏很少說，先加上代碼chrome

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
    <title>loading</title>
</head>
<body>
    fgdfgfdgdfgdfgdfgdfgf
</body>
</html>
<script>
    /*
        autor : shizhouyu
        方法：
        loading(time,loadimg)
        參數說明：
            time loading加載幾時關閉，不傳或者傳爲0視爲不關閉
            loadimg：動態轉動的圖片，不傳則只顯示文字
        方法：
        removeLoading()
        刪除正在運行的loading層
    */
    ;(function($){
        function isIE(){//判斷IE
            if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
                return true;
            }
            else{
                return false;
            }
        }
        if(!isIE()){
            HTMLElement.prototype.__defineGetter__('innerText', function(){//定義方法，兼容火狐方法textContent
                    var str = '';
                    var childS = this.childNodes;
                    for(var i = 0; i< childS.length; i++) {
                    if(childS[i].nodeType == 1){
                        str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;//處理換行
                    }
                    else if(childS[i].nodeType == 3)
                        str += childS[i].nodeValue;
                    }
                    return str;
                }
            );
            HTMLElement.prototype.__defineSetter__('innerText', function(sText){
                    this.textContent = sText; 
                } 
            );
        }
        $.loading = function(time,loadimg){
            if(arguments.length == 0){
                time = 0;loadimg='';//處理參數
            }
            if(arguments.length == 1){
                time = arguments[0];loadimg='';
            }
            var div = document.createElement('div');
            var smallD = document.createElement('div');
            div.style.height = '100%';
            div.style.width = '100%';
            div.style.zIndex = 99999;
            div.style.position = 'fixed';
            div.style.backgroundColor = '#fff';
            div.style.top = 0;
            div.style.left = 0;
            div.id = 'loading_szy_ver1';
            smallD.style.height = '50px';
            smallD.style.width = '190px';
            smallD.style.zIndex = 999999;
            smallD.style.position = 'absolute';
            smallD.style.borderWidth = '1px';
            smallD.style.borderStyle = 'solid';
            smallD.style.borderColor = '#216DCC';
            smallD.style.top = '50%';
            smallD.style.left = '50%';
            smallD.style.marginTop = '-25px';
            smallD.style.marginLeft = '-95px';
            var img = '';
            var temp = '';
            if(loadimg != ''){
                img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
                temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">頁面加載中，請稍後.</p>';
            }else{
                temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">頁面加載中，請稍後.</p>';
            }
            smallD.innerHTML = img + temp;
            div.appendChild(smallD);
            document.body.appendChild(div);
            var flag = 1;
            var timep = setInterval(function(){
                var p = smallD.getElementsByTagName('p')[0];
                if(flag == 1){
                    p.innerText = '頁面加載中，請稍後..';flag = 2;
                }else if(flag == 2){
                    p.innerText = '頁面加載中，請稍後...';flag = 3;
                }else if(flag == 3){
                    p.innerText = '頁面加載中，請稍後....';flag = 4;
                }else{
                    p.innerText = '頁面加載中，請稍後.';flag = 1;
                }
            },300);
            if(!!time){
                var timer = setTimeout(function(){
                    if(div && div.parentNode && div.tagName != 'BODY'){  
                        div.parentNode.removeChild(div);  
                    }  
                },time*1000);
            }
        };
        $.removeLoading = function(){
            var n = document.getElementById('loading_szy_ver1');
            if(n && n.parentNode && n.tagName != 'BODY'){  
                n.parentNode.removeChild(n);  
            } 
        };
    })(window);
    loading(0,'loading.gif');
</script>

增長cookie判斷是不是第一次加載頁面cookie

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
    <title>loading</title>
</head>
<body>
    fgdfgfdgdfgdfgdfgdfgf
</body>
</html>
<script>
    /*
        autor : shizhouyu
        方法：
        loading(time,loadimg)
        參數說明：
            time loading加載幾時關閉，不傳或者傳爲0視爲不關閉
            loadimg：動態轉動的圖片，不傳則只顯示文字
        方法：
        removeLoading()
        刪除正在運行的loading層
    */
    ;(function($){
        function isIE(){
            if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
                return true;
            }
            else{
                return false;
            }
        }
        if(!isIE()){
            HTMLElement.prototype.__defineGetter__('innerText', function(){
                    var str = '';
                    var childS = this.childNodes;
                    for(var i = 0; i< childS.length; i++) {
                    if(childS[i].nodeType == 1){
                        str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;
                    }
                    else if(childS[i].nodeType == 3)
                        str += childS[i].nodeValue;
                    }
                    return str;
                }
            );
            HTMLElement.prototype.__defineSetter__('innerText', function(sText){
                    this.textContent = sText; 
                } 
            );
        }
        $.cookieSet = function(name, val, parm) {
            var d;
            parm.G && (d = new Date, d.setTime(d.getTime() + parm.G));
            document.cookie = name + "=" + val +(d ? "; expires=" + d.toGMTString() : "") +'; domain='+ (parm.domin ? parm.domin : '') +'; path='+(parm.path ? parm.path : '')+';';
        };
        $.cookieGet = function(name) {
            return (name = RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) ? name[2] : null;
        };
        $.loading = function(time,loadimg){
            var cookieEN = cookieGet('loadF');
            if(!cookieEN){
                cookieSet('loadF',1,{'G':30*60*1000});
                if(arguments.length == 0){
                    time = 0;loadimg='';
                }
                if(arguments.length == 1){
                    time = arguments[0];loadimg='';
                }
                var div = document.createElement('div');
                var smallD = document.createElement('div');
                div.style.height = '100%';
                div.style.width = '100%';
                div.style.zIndex = 99999;
                div.style.position = 'fixed';
                div.style.backgroundColor = '#fff';
                div.style.top = 0;
                div.style.left = 0;
                div.id = 'loading_szy_ver1';
                smallD.style.height = '50px';
                smallD.style.width = '190px';
                smallD.style.zIndex = 999999;
                smallD.style.position = 'absolute';
                smallD.style.borderWidth = '1px';
                smallD.style.borderStyle = 'solid';
                smallD.style.borderColor = '#216DCC';
                smallD.style.top = '50%';
                smallD.style.left = '50%';
                smallD.style.marginTop = '-25px';
                smallD.style.marginLeft = '-95px';
                var img = '';
                var temp = '';
                if(loadimg != ''){
                    img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
                    temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">頁面加載中，請稍後.</p>';
                }else{
                    temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">頁面加載中，請稍後.</p>';
                }
                smallD.innerHTML = img + temp;
                div.appendChild(smallD);
                document.body.appendChild(div);
                var flag = 1;
                var timep = setInterval(function(){
                    var p = smallD.getElementsByTagName('p')[0];
                    if(flag == 1){
                        p.innerText = '頁面加載中，請稍後..';flag = 2;
                    }else if(flag == 2){
                        p.innerText = '頁面加載中，請稍後...';flag = 3;
                    }else if(flag == 3){
                        p.innerText = '頁面加載中，請稍後....';flag = 4;
                    }else{
                        p.innerText = '頁面加載中，請稍後.';flag = 1;
                    }
                },300);
                if(!!time){
                    var timer = setTimeout(function(){
                        if(div && div.parentNode && div.tagName != 'BODY'){  
                            div.parentNode.removeChild(div);  
                        }  
                    },time*1000);
                }
            }
        };
        $.removeLoading = function(){
            var n = document.getElementById('loading_szy_ver1');
            if(n && n.parentNode && n.tagName != 'BODY'){  
                n.parentNode.removeChild(n);  
            } 
        };
    })(window);
    loading(10,'loading.gif');
</script>

增長的cookie判斷是不是第一次加載頁面，若是沒有就顯示loading,若是不是第一次加載，則直接顯示頁面不顯示loading,loading的顯示的cookie設置時間是30分鐘，超過30分鐘認爲又是新頁面的，須要從新顯示loading層！app

js用法很簡單，不傳值的狀況下會一直顯示顯示loading,這個時候能夠配合頁面資源加載完畢後再調用removeLoading()刪除loading層就能夠了。dom

頁面loading另一種用法！ui

頁面進來先執行loading,等圖片所有加載完成後再刪除loading層，這裏涉及計算頁面全部的圖片的路徑的方法，這裏附上實例代碼！this

function getImgUrl(){//獲取綁定到元素上的全部的圖片路徑
    var mydiv = document.getElementsByTagName('*');
    var obj = [];
    var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
    for(var i=0;i < mydiv.length;i++){
        if(mydiv[i].currentStyle) {
            var pattern = /url\(\"(.*\.(jpg|png|gif|bmp))\"\)/;
            var img = mydiv[i].currentStyle['backgroundImage'].toString();
            if(img != 'none'){
                if(pattern.test(img)){
                    obj.push(RegExp.$1); 
                }
            }else{
              continue;
            }
        } else if(window.getComputedStyle) {
            var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
            var img = window.getComputedStyle(mydiv[i] , null)['backgroundImage'].toString();
            if(img != 'none'){
                if(pattern.test(img)){
                    obj.push(RegExp.$1); 
                }
            }else{
                continue;
            }
        }
    }
    return obj;
}
loading(0,'images/loading.gif');
var obj_img = getImgUrl();
var _l = obj_img.length;
var oc = 0;
for(var i = 0;i < _l; i++){
    var img = new Image();
    img.onload = function(){
        oc++;
        if(oc >= _l){
            removeLoading();
            $('.w').show();
        }
    }
    img.src = obj_img[i];
    img.onload = img.onerror = img.onabort = function(){
         oc++;
         if(oc >= _l){
            removeLoading();
            $('.w').show();
        }
    }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程