Showing
5 changed files
with
66 additions
and
5 deletions
static/img/loading.gif
0 → 100644

8.37 KB
static/js/plugin/loading.js
0 → 100644
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状态 |
static/sass/_loading.scss
0 → 100644
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"; |
-
Please register or login to post a comment