界面懒加载优化问题

来源：互联网发布：软件安装管家编辑：程序博客网时间：2024/05/23 00:16

最近工作项目后期，要求到对界面进行优化。对于前端菜鸡来说真是各种炸，特将一些小demo应用整理出来，便人利己。

1.界面优化首先想到的是懒加载lazyloading，对此也进行了相关知识的百度，找到了较简单的插件fakeloader

<script src="js/fakeloader.min.js"></script>

2.也有相应的css

<link rel="stylesheet" type="text/css"href="css/fakeloader.css" />

3.界面优化主要的效果就是出现遮罩层显示加载状态，赋值一定的时间后，将界面全部展现出来

对界面初始化进行一些赋值：

$(document).ready(function(){    $(".fakeloader").fakeLoader({        timeToHide:1200,        bgColor:"#eee",        spinner:"spinner2",        fadeDiv:"mytest"    });});

4.那么遮罩层赋值好了，就需要在界面中放上遮罩层了

<div class="fakeloader"></div><div class="container"><div id="mytest" style="display: none;"></div></div>

需要进行隐藏的代码需要放置在mytest的div内，用以起到timeout结束后进行显示

5.在初始化的代码中可以选择任一样式，通过spinner+i的形式选择

6.由于是前端渣渣，有问题可以互相交流哦！demo在下面附上，欢迎交流！

(a). index.html

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><link rel="stylesheet" href="css/fakeloader.css"><link href="css/mui.min.css" /><title></title></head><body><div class="fakeloader"></div><div class="container"><div id="mytest" style="display: none;"><img src="img/img_head_3.jpg" style="width: 100%;height: auto;"/></div></div><script src="js/jquery.min.js"></script><script src="js/fakeloader.js"></script><script>$(document).ready(function() {$(".fakeloader").fakeLoader({timeToHide: 1200,bgColor: "#eee",spinner: "spinner2",fadeDiv: "mytest"});});</script></body></html>

(b).js

/*-------------------------------------------------------------------- *JAVASCRIPT "FakeLoader.js" *Version:    1.1.0 - 2014 *author:     João Pereira *website:    http://www.joaopereira.pt *Licensed MIT -----------------------------------------------------------------------*/(function ($) {     $.fn.fakeLoader = function(options) {        //Defaults        var settings = $.extend({            timeToHide:1200, // Default Time to hide fakeLoader            pos:'fixed',// Default Position            top:'0px',  // Default Top value            left:'0px', // Default Left value            width:'100%', // Default width             height:'100%', // Default Height            zIndex: '999',  // Default zIndex             bgColor: '#2ecc71', // Default background color            spinner:'spinner7', // Default Spinner            imagePath:'' // Default Path custom image        }, options);        //Customized Spinners        var spinner01 = '<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';        var spinner02 = '<div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';        var spinner03 = '<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';        var spinner04 = '<div class="fl spinner4"></div>';         var spinner05 = '<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>';         var spinner06 = '<div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';         var spinner07 = '<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>';         //The target        var el = $(this);        //Init styles        var initStyles = {            'position':settings.pos,            'width':settings.width,            'height':settings.height,            'top':settings.top,            'left':settings.left        };        //Apply styles        el.css(initStyles);        //Each         el.each(function() {            var a = settings.spinner;            //console.log(a)                switch (a) {                    case 'spinner1':                            el.html(spinner01);                        break;                    case 'spinner2':                            el.html(spinner02);                        break;                    case 'spinner3':                            el.html(spinner03);                        break;                    case 'spinner4':                            el.html(spinner04);                        break;                    case 'spinner5':                            el.html(spinner05);                        break;                    case 'spinner6':                            el.html(spinner06);                        break;                    case 'spinner7':                            el.html(spinner07);                        break;                    default:                        el.html(spinner01);                    }                //Add customized loader image                if (settings.imagePath !='') {                    el.html('<div class="fl"><img src="'+settings.imagePath+'"></div>');                    centerLoader();                }        });        //Time to hide fakeLoader        setTimeout(function(){        if(settings.fadeDiv != ''){                $("#"+settings.fadeDiv).css("display","block");            }    //隐藏加载页面            $(el).fadeOut();        }, settings.timeToHide);        //Return Styles         return this.css({            'backgroundColor':settings.bgColor,            'zIndex':settings.zIndex        });     }; // End Fake Loader         //Center Spinner        function centerLoader() {            var winW = $(window).width();            var winH = $(window).height();            var spinnerW = $('.fl').outerWidth();            var spinnerH = $('.fl').outerHeight();            $('.fl').css({                'position':'absolute',                'left':(winW/2)-(spinnerW/2),                'top':(winH/2)-(spinnerH/2)            });        }        $(window).load(function(){                centerLoader();              $(window).resize(function(){                centerLoader();              });        });}(jQuery));

(c).css

/********************** *CSS Animations by: *http://codepen.io/vivinantony***********************/.spinner1 {  width: 40px;  height: 40px;  position: relative;}.double-bounce1, .double-bounce2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #fff;  opacity: 0.6;  position: absolute;  top: 0;  left: 0;    -webkit-animation: bounce 2.0s infinite ease-in-out;  animation: bounce 2.0s infinite ease-in-out;}.double-bounce2 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}@-webkit-keyframes bounce {  0%, 100% { -webkit-transform: scale(0.0) }  50% { -webkit-transform: scale(1.0) }}@keyframes bounce {  0%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 50% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}.spinner2 {  width: 40px;  height: 40px;  position: relative;}.container1 > div, .container2 > div, .container3 > div {  width: 12px;  height: 12px;  background-color: #fff;  border-radius: 100%;  position: absolute;  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;  animation: bouncedelay 1.2s infinite ease-in-out;  /* Prevent first frame from flickering when animation starts */  -webkit-animation-fill-mode: both;  animation-fill-mode: both;}.spinner2 .spinner-container {  position: absolute;  width: 100%;  height: 100%;}.container2 {  -webkit-transform: rotateZ(45deg);  transform: rotateZ(45deg);}.container3 {  -webkit-transform: rotateZ(90deg);  transform: rotateZ(90deg);}.circle1 { top: 646px; left: 355px; }.circle2 { top: 0; right: 0; }.circle3 { right: 0; bottom: 0; }.circle4 { left: 0; bottom: 0; }.container2 .circle1 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;}.container3 .circle1 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}.container1 .circle2 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;}.container2 .circle2 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;}.container3 .circle2 {  -webkit-animation-delay: -0.7s;  animation-delay: -0.7s;}.container1 .circle3 {  -webkit-animation-delay: -0.6s;  animation-delay: -0.6s;}.container2 .circle3 {  -webkit-animation-delay: -0.5s;  animation-delay: -0.5s;}.container3 .circle3 {  -webkit-animation-delay: -0.4s;  animation-delay: -0.4s;}.container1 .circle4 {  -webkit-animation-delay: -0.3s;  animation-delay: -0.3s;}.container2 .circle4 {  -webkit-animation-delay: -0.2s;  animation-delay: -0.2s;}.container3 .circle4 {  -webkit-animation-delay: -0.1s;  animation-delay: -0.1s;}@-webkit-keyframes bouncedelay {  0%, 80%, 100% { -webkit-transform: scale(0.0) }  40% { -webkit-transform: scale(1.0) }}@keyframes bouncedelay {  0%, 80%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 40% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}.spinner3 {  width: 40px;  height: 40px;  position: relative;    -webkit-animation: rotate 2.0s infinite linear;  animation: rotate 2.0s infinite linear;}.dot1, .dot2 {  width: 60%;  height: 60%;  display: inline-block;  position: absolute;  top: 0;  background-color: #fff;  border-radius: 100%;    -webkit-animation: bounce 2.0s infinite ease-in-out;  animation: bounce 2.0s infinite ease-in-out;}.dot2 {  top: auto;  bottom: 0px;  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}@-webkit-keyframes bounce {  0%, 100% { -webkit-transform: scale(0.0) }  50% { -webkit-transform: scale(1.0) }}@keyframes bounce {  0%, 100% {     transform: scale(0.0);    -webkit-transform: scale(0.0);  } 50% {     transform: scale(1.0);    -webkit-transform: scale(1.0);  }}.spinner4 {  width: 30px;  height: 30px;  background-color: #fff;  -webkit-animation: rotateplane 1.2s infinite ease-in-out;  animation: rotateplane 1.2s infinite ease-in-out;}@-webkit-keyframes rotateplane {  0% { -webkit-transform: perspective(120px) }  50% { -webkit-transform: perspective(120px) rotateY(180deg) }  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }}@keyframes rotateplane {  0% {     transform: perspective(120px) rotateX(0deg) rotateY(0deg);    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)   } 50% {     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)   } 100% {     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);  }}.spinner5 {  width: 32px;  height: 32px;  position: relative;}.cube1, .cube2 {  background-color: #fff;  width: 10px;  height: 10px;  position: absolute;  top: 0;  left: 0;    -webkit-animation: cubemove 1.8s infinite ease-in-out;  animation: cubemove 1.8s infinite ease-in-out;}.cube2 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;}@-webkit-keyframes cubemove {  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }  100% { -webkit-transform: rotate(-360deg) }}@keyframes cubemove {  25% {     transform: translateX(42px) rotate(-90deg) scale(0.5);    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);  } 50% {     transform: translateX(42px) translateY(42px) rotate(-179deg);    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);  } 50.1% {     transform: translateX(42px) translateY(42px) rotate(-180deg);    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);  } 75% {     transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);  } 100% {     transform: rotate(-360deg);    -webkit-transform: rotate(-360deg);  }}.spinner6 {  width: 50px;  height: 30px;  text-align: center;}.spinner6 > div {  background-color: #fff;  height: 100%;  width: 6px;  margin-left:2px;  display: inline-block;    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;  animation: stretchdelay 1.2s infinite ease-in-out;}.spinner6 .rect2 {  -webkit-animation-delay: -1.1s;  animation-delay: -1.1s;}.spinner6 .rect3 {  -webkit-animation-delay: -1.0s;  animation-delay: -1.0s;}.spinner6 .rect4 {  -webkit-animation-delay: -0.9s;  animation-delay: -0.9s;}.spinner6 .rect5 {  -webkit-animation-delay: -0.8s;  animation-delay: -0.8s;}@-webkit-keyframes stretchdelay {  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }    20% { -webkit-transform: scaleY(1.0) }}@keyframes stretchdelay {  0%, 40%, 100% {     transform: scaleY(0.4);    -webkit-transform: scaleY(0.4);  }  20% {     transform: scaleY(1.0);    -webkit-transform: scaleY(1.0);  }}  .spinner7 {      width: 90px;      height: 30px;      text-align: center;    }    .spinner7 > div {      background-color: #fff;      height: 15px;      width: 15px;      margin-left:3px;      border-radius: 50%;      display: inline-block;            -webkit-animation: stretchdelay 0.7s infinite ease-in-out;      animation: stretchdelay 0.7s infinite ease-in-out;    }    .spinner7 .circ2 {      -webkit-animation-delay: -0.6s;      animation-delay: -0.6s;    }    .spinner7 .circ3 {      -webkit-animation-delay: -0.5s;      animation-delay: -0.5s;    }    .spinner7 .circ4 {      -webkit-animation-delay: -0.4s;      animation-delay: -0.4s;    }    .spinner7 .circ5 {      -webkit-animation-delay: -0.3s;      animation-delay: -0.3s;    }    @-webkit-keyframes stretchdelay {      0%, 40%, 100% { -webkit-transform: translateY(-10px) }        20% { -webkit-transform: translateY(-20px) }    }    @keyframes stretchdelay {      0%, 40%, 100% {         transform: translateY(-10px);        -webkit-transform: translateY(-10px);      } 20% {        transform: translateY(-20px);        -webkit-transform: translateY(-20px);      }    }

阅读全文

1 0