loading

+/**
+ * Loading mask
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/29
+ */
+
+var $ = require('yoho.zepto');
+
+var $page = $('.yoho-page');
+
+var $loading;
+
+/**
+ * 初始化loading mask
+ * @param $container loading容器, position:relative
+ */
+function initLoadingMask() {
+    var html = '<div class="loading-mask hide"><div class="loading"></div></div>';
+
+    $page.append(html);
+
+    $loading = $page.children('.loading-mask');
+}
+
+//显示loading
+function showLoadingMask() {
+    $loading.removeClass('hide');
+}
+
+//隐藏loading
+function hideLoadingMask() {
+    $loading.addClass('hide');
+}
+
+exports.initLoadingMask = initLoadingMask;
+exports.showLoadingMask = showLoadingMask;
+exports.hideLoadingMask = hideLoadingMask;
\ No newline at end of file

@@ -14,6 +14,7 @@ var $brandHeader = $('#brand-header'),
 var filter = require('../plugin/filter');
 
 var tip = require('../plugin/tip');
+var loading = require('../plugin/loading');
 
 var $goodsContainer = $('#goods-container'),
     $ngc = $goodsContainer.children('.new-goods'),
@@ -72,6 +73,10 @@ function search(opt) {
         nav, navType,
         page;
 
+    if (searching) {
+        return;
+    }
+
     if (opt) {
 
         //筛选项变更则重置reload为true
@@ -126,10 +131,6 @@ function search(opt) {
         $.extend(defaultOpt, ext); //扩展筛选项
     }
 
-    if (searching) {
-        return;
-    }
-
     //导航类别
     if ($pre.hasClass('new')) {
         navType = 'newest';
@@ -157,6 +158,7 @@ function search(opt) {
     });
 
     searching = true;
+    loading.showLoadingMask();
 
     $.ajax({
         type: 'GET',
@@ -198,6 +200,7 @@ function search(opt) {
             nav.page = page;
 
             searching = false;
+            loading.hideLoadingMask();
         }
     });
 
@@ -206,6 +209,7 @@ function search(opt) {
 lazyLoad($('.lazy'));
 
 filter.registerCbFn(search);
+loading.initLoadingMask();
 
 //导航栏点击逻辑说明：
 //1.点击非active项时切换active状态

+.loading-mask {
+    position: absolute;
+    background: rgba(0,0,0,.3);
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    
+    .loading {
+        position: absolute;
+        width: 100rem / $pxConvertRem;
+        height: 40rem / $pxConvertRem;
+        background: image-url('loading.gif') no-repeat;
+        background-size: 100% 100%;
+        top: 50%;
+        left: 50%;
+        margin-left: -50rem / $pxConvertRem;
+        margin-top: -20rem / $pxConvertRem;
+    }
+}
\ No newline at end of file

@@ -93,4 +93,4 @@ a {
 }
 
 
-@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";
+@import "layout/header", "layout/footer", "good", "filter", "loading", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";