html 页面卡死 怎么加loading

页面卡死，还是在页面内容或者代码上去解决。即使加了loading，页面卡死后，loading代码本身也会出现假死的。

除了加loading外，最重要的还是解决假死的问题。

参考以下loading代码：

<style>

.loading{

            width: 80px

            height: 40px

            margin: 0 auto

            margin-top:100px

        }

        .loading span{

            display: inline-block

            width: 8px

            height: 100%

            border-radius: 4px

            background: lightgreen

            -webkit-animation: load 1s ease infinite

        }

        @-webkit-keyframes load{

            0%,100%{

                height: 40px

                background: lightgreen

            }

            50%{

                height: 70px

                margin: -15px 0

                background: lightblue

            }

        }

        .loading span:nth-child(2){

            -webkit-animation-delay:0.2s

        }

        .loading span:nth-child(3){

            -webkit-animation-delay:0.4s

        }

        .loading span:nth-child(4){

            -webkit-animation-delay:0.6s

        }

        .loading span:nth-child(5){

            -webkit-animation-delay:0.8s

        }

</style>

<div class="loading">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

        <span></span>

</div>

1、直接贴图：

在界面上贴一个gif动态等待效果图片

gif图片获取方式：网上找素材，会ps的可以自己制作

<img src="wait.gif" />

2、CSS3/SVG/HTML5 Canvas手动绘制等待效果：

这种效果：网上有很多类似素材，可以根据需要选择，或使用上述技术绘制

下面提供一个CSS3绘制的范例

<style>

.loading {

width:0

height:0

border-right:20px solid #fff

border-top:20px solid #000

border-left:20px solid #fff

border-bottom:20px solid #000

border-radius: 20px

-moz-border-radius: 20px

-webkit-border-radius: 20px

}

.loading {

animation: bganim 0.6s linear 0s infinite

-moz-animation: bganim 0.6s linear 0s infinite

-webkit-animation: bganim 0.6s linear 0s infinite

}

@keyframes bganim {

from { transform:rotate(0deg)} to { transform:rotate(360deg)}

}

@-moz-keyframes bganim {

from { -moz-transform:rotate(0deg)} to { -moz-transform:rotate(360deg)}

}

@-webkit-keyframes bganim {

from { -webkit-transform:rotate(0deg)} to { -webkit-transform:rotate(360deg)}

}

</style>

<label>CSS3效果</label>

<div class="loading"></div>

-------------------------------------------------

效果如下图：

运行机制很简单，先手动绘制一个静态的图，然后控制对应div进行360度旋转，即可实现

3、使用js等待效果插件(如：spin.js)

JS

-----------------------------------------------------

var opts = {

lines: 9,

length: 0,

width: 15,

radius: 20,

corners: 1,

rotate: 0,

direction: 1,

color: '#0101DF',

speed: 1,

trail: 34,

shadow: false,

hwaccel: false,

className: 'spinner',

zIndex: 2e9,

top: '50%',

left: '50%'

}

var target = document.getElementById('img_wait')

var spinner = new Spinner(opts).spin(target)

7

html

---------------------------------

<div id="img_wait"></div>

loadding动画现在有2中方式实现：

1.旧方法：用PS或者Flash制作gif格式的动态图片，导入到html里面

2.用css3的动画属性（animite）,直接通过样式+div就可以制作出loading效果

当然优缺点也很明显，第一种方法不需要考虑兼容性，第二种方法，适用于移动端和PC端上高版本的浏览器，因为低版本的浏览器对css3的兼容性只有一个词来形容--坑爹啊。

---