IE10+ CSS hack以及loading实际使用实例页面

展示

代码

CSS代码：

.hack { position: absolute; visibility: hidden; }
.box {
    width: 256px;
    height: 256px;
    margin-bottom: 10px;
}
/* IE6-IE9实现 */
.loading {
    width: 32px; height: 32px;
    text-align: left;
    background: url(loading-css3.gif);
}
/* IE10+ */
.hack:valid ~ #main .loading {
    background: none;
}
.hack:valid ~ #main .loading::before {
    content: '';
    width: 3px; height: 3px;
    margin-left: 14.5px; margin-top: 14.5px;	
    border-radius: 100%;
    box-shadow: ...;
    position: absolute;
}
            

HTML代码：

<div class="box auto tc"><span class="loading spin vm dib"></span><i class="dib_vm"></i></div>
<div class="box auto tc"><span class="loading spin vm dib"></span><i class="dib_vm"></i></div>
<div class="box auto tc"><span class="loading spin vm dib"></span><i class="dib_vm"></i></div>
<div class="box auto tc"><span class="loading spin vm dib"></span><i class="dib_vm"></i></div>
<div class="box auto tc"><span class="loading spin vm dib"></span><i class="dib_vm"></i></div>
            

JS代码：

(function() {
    var eleBox = $(".box"), index = 1, length = eleBox.length;
    var funStep = function() {
        var myImage = new Image(), src = '//image.zhangxinxu.com/image/study/s/s256/mm'+ index +'.jpg';
        myImage.onload = function() {
            eleBox.eq(index - 1).html('<img src="'+ src +'">');
            index++;
            index <= length && setTimeout(funStep, 1000);
        };
        myImage.src = src;
    };
    funStep();
})();