带有 jQ​​uery 的模块化 AJAX 加载指示器

Question

我正在尝试为包含许多 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

Answer 1

我会将样式保留在 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;
}

Answer 2

不透明度也适用于子元素。而不是使用不透明度，只需使用 rgba 颜色使父级的背景具有更多的不透明度。 Here 就是一个例子。你也在使用

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

你应该什么时候完成

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

这导致我的页面崩溃。