2

我正在尝试为具有许多 AJAX 请求的页面显示加载图像（并将父级变为透明）。分别为每个 div 添加/删除加载图标和不透明度的最有效方法是什么？

这是我到目前为止所拥有的。我的方法的问题是不透明度也适用于 gif，这不是我想要的。我的代码是否有一个简单的修复方法或更好的方法？

示例：http: //jsfiddle.net/justincook/x4C2t/

HTML：

<div id="a" class="box">A</div>
<div id="b" class="box">B</div>
<div id="c" class="box">C</div>

JavaScript：

$.fn.loading = function(show){
    if(show){
        this.prepend('<div class="loading-centered"></div>');
        this.css({ opacity: 0.3 });
    }else{
        this.children('.loading-centered').remove();
        this.css({ opacity: 1 });
    }
};

$('#a').loading(true); //start  
setTimeout(function(){ $('#a').loading(false); }, 3000); // stop
4

2 回答 2

5

我会在 CSS 中保留样式，只使用 JS 注入/删除元素http://jsfiddle.net/x4C2t/7/

$.fn.loading = function(show){
    if(show){
        this.prepend('<div class="loading-centered"></div>');
    }else{
        this.children('.loading-centered').remove();
    }
};

CSS：

.box {
    float:left;
    width:100px;
    height:100px;
    border:1px solid #bbb;
    margin: 10px;
    padding:20px;
    text-align:center;
    border-radius:10px;
    background: #eee;    
    position: relative;
}

.loading-centered {
    background:url('http://www.ajaxload.info/images/exemples/24.gif') center center no-repeat white;
    position:absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    border-radius:10px;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
}
于 2013-06-18T20:04:44.303 回答
0

Opacity applies to an elements children as well. Instead of using opacity just make the background of the parent have more opacity with rgba colors. Here is an example. Also you were using

setInterval(function(){ $('#a').loading(false); }, 3000);

When you should have done

setTimeout(function(){ $('#a').loading(false); }, 3000);

That was causing the page to crash for me.

于 2013-06-18T19:47:39.483 回答