jQuery Loader加载时遮罩层不能根据窗口的改变而变化

在解决页面加载的问题时出现这种效果：

 在我缩小又放大浏览器窗口的时候，这个遮罩层并没有跟着我的窗口的改变而改变，这个时候，就需要我解决两个问题，一个是遮罩层的宽高 ，另一个就是中间那个加载的动图的位置

，遮罩层我把它的高度和宽度都设为100%就可以，我只粘了部分样式代码，具体实现代码还需要根据不同的项目来决定。这样不管我是否改变窗口，它都可以覆盖整个页面

var maskHeight = $(document).height();
var maskWidth = $(window).width();
var bgDiv = $('<div id="' + options.background.id + '"/>');
bgDiv.css({
zIndex: options.zIndex,
position: 'absolute',
top: '0px',
left: '0px',
"height": "100%",
"width": "100%",
opacity: options.background.opacity
});

bgDiv.appendTo("body");

接着就是加载中动图的位置，需要加个jquery的$(window).resize()监听事件，

$(window).on('resize',function () {
console.log("窗口改变了");
div.center();
});

监听事件调用的是center()函数：

$.fn.center = function () {
this.css("position", "absolute");
this.css("top",($(window).height() - this.outerHeight()) / 2 + $(window).scrollTop() + "px");
this.css("left",($(window).width() - this.outerWidth()) / 2 + $(window).scrollLeft() + "px");
return this;
};
})

这样，这个问题看起来解决了，但是还有个问题就是，$(window).resize()这个事件会调用多次，所以完美的做法就是先把上次的操作关闭：$(window).off('resize',div.center());

还有一个闭包的问题，就是div.center()这个调用外部函数的方法最好被替换掉，div具体的id调用，比如div的id为loders,那么调用的方法就是$("#loders").center();尽量避免直接访问外部的变量。