fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit 93c8867e325a8596a18f274bc8fa3130f900c354 1 parent a37ccebb

添加图片懒加载

Inline Side-by-side
Showing 4 changed files with 17 additions and 7 deletions
@@ -194,6 +194,7 @@ const helpers = { @@ -194,6 +194,7 @@ const helpers = {
194 letters: this.brandLetters(), 194 letters: this.brandLetters(),
195 customPriceLow: customPriceLow, 195 customPriceLow: customPriceLow,
196 customPriceHigh: customPriceHigh, 196 customPriceHigh: customPriceHigh,
  197 + showSize: !!q.sort,
197 nav: this.getSortNav(q.sort, sorts) 198 nav: this.getSortNav(q.sort, sorts)
198 }; 199 };
199 } 200 }
@@ -95,6 +95,7 @@ @@ -95,6 +95,7 @@
95 </div> 95 </div>
96 </div> 96 </div>
97 97
  98 +{{#if showSize}}
98 <div class="yoho-ui-accordion"> 99 <div class="yoho-ui-accordion">
99 <h3>尺码</h3> 100 <h3>尺码</h3>
100 <div class="body"> 101 <div class="body">
@@ -110,6 +111,7 @@ @@ -110,6 +111,7 @@
110 </div> 111 </div>
111 </div> 112 </div>
112 </div> 113 </div>
  114 +{{/if}}
113 115
114 <div class="yoho-ui-accordion"> 116 <div class="yoho-ui-accordion">
115 <h3>颜色</h3> 117 <h3>颜色</h3>
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 {{#each products}} 2 {{#each products}}
3 <div class="goods" data-id="{{productId}}"> 3 <div class="goods" data-id="{{productId}}">
4 <div class="goods-img"> 4 <div class="goods-img">
5 - <img src="{{image defaultImages 265 344}}" width="265" height="344" alt=""> 5 + <img class="lazy" data-original="{{image defaultImages 265 344}}" width="265" height="344" alt="">
6 </div> 6 </div>
7 <div class="goods-brand"> 7 <div class="goods-brand">
8 {{brandName}} 8 {{brandName}}
@@ -29,4 +29,4 @@ @@ -29,4 +29,4 @@
29 <div class="goods-img-list"> 29 <div class="goods-img-list">
30 </div> 30 </div>
31 </div> 31 </div>
32 -</div>  
  32 +</div>
1 -var $ = require('yoho-jquery'); 1 +var $ = require('yoho-jquery')
  2 +var Lazyload = require('yoho-jquery-lazyload');
2 var common = require('../../common'); 3 var common = require('../../common');
3 4
4 var query = common.queryString(); 5 var query = common.queryString();
@@ -15,6 +16,8 @@ var YohoListPage = { @@ -15,6 +16,8 @@ var YohoListPage = {
15 require('yoho-jquery-nanoscroller'); 16 require('yoho-jquery-nanoscroller');
16 require('../../plugins/check'); 17 require('../../plugins/check');
17 require('../../common/return-top'); 18 require('../../common/return-top');
  19 +
  20 + Lazyload();
18 $('.nano').nanoScroller(); 21 $('.nano').nanoScroller();
19 $('.yoho-ui-accordion', this.rootDoc).each(function() { 22 $('.yoho-ui-accordion', this.rootDoc).each(function() {
20 var opts = { 23 var opts = {
@@ -262,8 +265,8 @@ var YohoListPage = { @@ -262,8 +265,8 @@ var YohoListPage = {
262 var position = $(e.currentTarget).position(); 265 var position = $(e.currentTarget).position();
263 var productId = $(e.currentTarget).data('id'); 266 var productId = $(e.currentTarget).data('id');
264 var imgsSize = $(e.currentTarget).find('.goods-list i').length; 267 var imgsSize = $(e.currentTarget).find('.goods-list i').length;
265 - var cols = imgsSize % 4 === 0 ? imgsSize / 4 : (imgsSize / 4 + 1);  
266 var imgsCol; 268 var imgsCol;
  269 + var pos = {};
267 270
268 if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) { 271 if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
269 YohoListPage.goodsWrapperState = false; 272 YohoListPage.goodsWrapperState = false;
@@ -271,13 +274,17 @@ var YohoListPage = { @@ -271,13 +274,17 @@ var YohoListPage = {
271 274
272 if (!YohoListPage.goodsWrapperState) { 275 if (!YohoListPage.goodsWrapperState) {
273 YohoListPage.productId = productId; 276 YohoListPage.productId = productId;
274 - position.top += 10; 277 + pos.top = position.top + 10;
275 278
276 if (position.left > 500) { 279 if (position.left > 500) {
277 - position.left -= cols * 60; 280 + pos.right = 0;
  281 + pos.left = 'auto';
  282 + } else {
  283 + pos.right = 'auto';
  284 + pos.left = position.left;
278 } 285 }
279 286
280 - $(this.goodsWrapper).css(position); 287 + $(this.goodsWrapper).css(pos);
281 $('.goods', this.goodsWrapper).html($(e.currentTarget).html()); 288 $('.goods', this.goodsWrapper).html($(e.currentTarget).html());
282 $('.goods-img-list', this.goodsWrapper).empty(); 289 $('.goods-img-list', this.goodsWrapper).empty();
283 $(e.currentTarget).find('.goods-list i').each(function(index) { 290 $(e.currentTarget).find('.goods-list i').each(function(index) {