• 页面loading提示效果

    前言：

    现在做页面一般为了提示友好点，一般会做个页面正在加载的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' ? '
' : 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' ? '
' : 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();
        }
    }
}
  • 相关阅读:
    vue下使用echarts折线图及其横坐标拖拽功能
    vue下登录页背景图上下空白处自适应等高
    前端面试总结下~
    在C#中使用科大讯飞Web API进行语音合成
    C# Socket 发送&接收&返回
    AutoMapper在C#中的有趣应用
    RabbitMQ 在 C# 中简单应用
    .Net Core 读取配置文件
    C# / .Net Core 访问MongoDb库
    C#发送GET与POST请求
  • 原文地址：https://www.cnblogs.com/shizhouyu/p/5057116.html
Copyright © 2020-2023  润新知