頁面loading提示效果

本文轉載自查看原文 2015-12-18 15:01 6207 js

前言：

現在做頁面一般為了提示友好點，一般會做個頁面正在加載的loading提示效果，當頁面加載完畢后再顯示內容！這個時候就需要監控頁面的資源加載的情況，有時候這並不好做，因為頁面涉及圖片，視頻，已經js等等資源。所以我們在做loading的時候可以采用模擬的情況，適當給頁面加載一定時間的loading提示！

這里不多說，先加上代碼

<!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判斷是否是第一次加載頁面

<!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層！

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

頁面loading另外一種用法！

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

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();
        }
    }
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS實現頁面加載完畢之前loading提示效果 js實現的頁面加載完畢之前loading提示效果 js實現頁面加載完畢之前loading提示效果 JQuery實現頁面Loading效果 js實現的頁面加載完畢之前loading提示效果完整示例前端頁面loading效果(CSS實現) 頁面加載完成前的loading加載效果頁面加載時加Loading效果基於jquery實現頁面loading加載效果基於jquery的loading 加載提示效果實現代碼