Authored by xuqi

loading

  1 +/**
  2 + * Loading mask
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/29
  5 + */
  6 +
  7 +var $ = require('yoho.zepto');
  8 +
  9 +var $page = $('.yoho-page');
  10 +
  11 +var $loading;
  12 +
  13 +/**
  14 + * 初始化loading mask
  15 + * @param $container loading容器, position:relative
  16 + */
  17 +function initLoadingMask() {
  18 + var html = '<div class="loading-mask hide"><div class="loading"></div></div>';
  19 +
  20 + $page.append(html);
  21 +
  22 + $loading = $page.children('.loading-mask');
  23 +}
  24 +
  25 +//显示loading
  26 +function showLoadingMask() {
  27 + $loading.removeClass('hide');
  28 +}
  29 +
  30 +//隐藏loading
  31 +function hideLoadingMask() {
  32 + $loading.addClass('hide');
  33 +}
  34 +
  35 +exports.initLoadingMask = initLoadingMask;
  36 +exports.showLoadingMask = showLoadingMask;
  37 +exports.hideLoadingMask = hideLoadingMask;
@@ -14,6 +14,7 @@ var $brandHeader = $('#brand-header'), @@ -14,6 +14,7 @@ var $brandHeader = $('#brand-header'),
14 var filter = require('../plugin/filter'); 14 var filter = require('../plugin/filter');
15 15
16 var tip = require('../plugin/tip'); 16 var tip = require('../plugin/tip');
  17 +var loading = require('../plugin/loading');
17 18
18 var $goodsContainer = $('#goods-container'), 19 var $goodsContainer = $('#goods-container'),
19 $ngc = $goodsContainer.children('.new-goods'), 20 $ngc = $goodsContainer.children('.new-goods'),
@@ -72,6 +73,10 @@ function search(opt) { @@ -72,6 +73,10 @@ function search(opt) {
72 nav, navType, 73 nav, navType,
73 page; 74 page;
74 75
  76 + if (searching) {
  77 + return;
  78 + }
  79 +
75 if (opt) { 80 if (opt) {
76 81
77 //筛选项变更则重置reload为true 82 //筛选项变更则重置reload为true
@@ -126,10 +131,6 @@ function search(opt) { @@ -126,10 +131,6 @@ function search(opt) {
126 $.extend(defaultOpt, ext); //扩展筛选项 131 $.extend(defaultOpt, ext); //扩展筛选项
127 } 132 }
128 133
129 - if (searching) {  
130 - return;  
131 - }  
132 -  
133 //导航类别 134 //导航类别
134 if ($pre.hasClass('new')) { 135 if ($pre.hasClass('new')) {
135 navType = 'newest'; 136 navType = 'newest';
@@ -157,6 +158,7 @@ function search(opt) { @@ -157,6 +158,7 @@ function search(opt) {
157 }); 158 });
158 159
159 searching = true; 160 searching = true;
  161 + loading.showLoadingMask();
160 162
161 $.ajax({ 163 $.ajax({
162 type: 'GET', 164 type: 'GET',
@@ -198,6 +200,7 @@ function search(opt) { @@ -198,6 +200,7 @@ function search(opt) {
198 nav.page = page; 200 nav.page = page;
199 201
200 searching = false; 202 searching = false;
  203 + loading.hideLoadingMask();
201 } 204 }
202 }); 205 });
203 206
@@ -206,6 +209,7 @@ function search(opt) { @@ -206,6 +209,7 @@ function search(opt) {
206 lazyLoad($('.lazy')); 209 lazyLoad($('.lazy'));
207 210
208 filter.registerCbFn(search); 211 filter.registerCbFn(search);
  212 +loading.initLoadingMask();
209 213
210 //导航栏点击逻辑说明: 214 //导航栏点击逻辑说明:
211 //1.点击非active项时切换active状态 215 //1.点击非active项时切换active状态
  1 +.loading-mask {
  2 + position: absolute;
  3 + background: rgba(0,0,0,.3);
  4 + top: 0;
  5 + bottom: 0;
  6 + right: 0;
  7 + left: 0;
  8 +
  9 + .loading {
  10 + position: absolute;
  11 + width: 100rem / $pxConvertRem;
  12 + height: 40rem / $pxConvertRem;
  13 + background: image-url('loading.gif') no-repeat;
  14 + background-size: 100% 100%;
  15 + top: 50%;
  16 + left: 50%;
  17 + margin-left: -50rem / $pxConvertRem;
  18 + margin-top: -20rem / $pxConvertRem;
  19 + }
  20 +}
@@ -93,4 +93,4 @@ a { @@ -93,4 +93,4 @@ a {
93 } 93 }
94 94
95 95
96 -@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index"; 96 +@import "layout/header", "layout/footer", "good", "filter", "loading", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";