fe / yohobuywap-node · Commits

Go to a project

Authored by 徐炜
Commit f4c4af518ced447c295bb8cd2a9c987415a9bf2a 2 parents 123165bc 09df01d6

Merge branch 'feature/guang-detail-optim' into release/wap-optim4 

# Conflicts:
#	public/js/common.js
#	public/js/guang/info.js
Inline Side-by-side
Showing 8 changed files with 202 additions and 151 deletions
@@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => { @@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => {
41 joinContentFunc(++i, len); 41 joinContentFunc(++i, len);
42 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图 42 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图
43 build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640); 43 build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640);
  44 +
  45 + // 前三张图片不使用懒加载，下同
  46 + if (i <= 3) {
  47 + build.noLazy = true;
  48 + }
  49 +
44 contents.push(build); 50 contents.push(build);
45 joinContentFunc(++i, len); 51 joinContentFunc(++i, len);
46 52
47 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) { 53 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) {
48 let imgs = art.smallPic.data; 54 let imgs = art.smallPic.data;
49 55
  56 + if (i <= 3) {
  57 + build.noLazy = true;
  58 + }
  59 +
50 build.smallImage = [{ 60 build.smallImage = [{
51 src: helpers.image(imgs[0].src, 315, 420) 61 src: helpers.image(imgs[0].src, 315, 420)
52 }, { 62 }, {
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 {{# author}} 5 {{# author}}
6 <div class="author" data-id={{id}}> 6 <div class="author" data-id={{id}}>
7 <a class="clearfix" href={{url}}> 7 <a class="clearfix" href={{url}}>
8 - <img class="avatar" src={{avatar}}> 8 + <img class="avatar" src={{image2 avatar mode=2 q=60}}>
9 <span class="name">{{name}}</span> 9 <span class="name">{{name}}</span>
10 <span class="intro">{{intro}}</span> 10 <span class="intro">{{intro}}</span>
11 </a> 11 </a>
@@ -27,15 +27,25 @@ @@ -27,15 +27,25 @@
27 27
28 {{#if bigImage}} 28 {{#if bigImage}}
29 <div class="post-block big-img-block"> 29 <div class="post-block big-img-block">
30 - <img class="lazy" data-original={{bigImage}}> 30 + {{#if noLazy}}
  31 + <img src={{image2 bigImage q=60}}>
  32 + {{else}}
  33 + <img class="lazy" data-original={{image2 bigImage q=60}}>
  34 + {{/if}}
31 </div> 35 </div>
32 {{/if}} 36 {{/if}}
33 37
34 {{#if smallImage}} 38 {{#if smallImage}}
35 <div class="post-block small-img-block clearfix"> 39 <div class="post-block small-img-block clearfix">
  40 + {{#if noLazy}}
  41 + {{# smallImage}}
  42 + <img src={{image2 src q=60}}>
  43 + {{/ smallImage}}
  44 + {{else}}
36 {{# smallImage}} 45 {{# smallImage}}
37 - <img class="lazy" data-original={{src}}> 46 + <img class="lazy" data-original={{image2 src q=60}}>
38 {{/ smallImage}} 47 {{/ smallImage}}
  48 + {{/if}}
39 </div> 49 </div>
40 {{/if}} 50 {{/if}}
41 51
  1 +// 超轻量锤子，业务代码不用动，替换掉重量级的 hammer.js
  2 +const $ = require('yoho-jquery');
  3 +
  4 +const ToyHammer = function(elem) {
  5 + this.elem = elem;
  6 +};
  7 +
  8 +const EVENT_MAPPER = {
  9 + tap: 'touchstart'
  10 +};
  11 +
  12 +ToyHammer.prototype.on = function(event, fn) {
  13 + const mappedEvent = EVENT_MAPPER[event];
  14 +
  15 + if (this.elem && mappedEvent) {
  16 + $(this.elem).on(mappedEvent, function(e) {
  17 + fn({
  18 + srcEvent: e
  19 + });
  20 + });
  21 + }
  22 +};
  23 +
  24 +
  25 +module.exports = ToyHammer;
  1 +var lazyLoad = require('yoho-jquery-lazyload');
  2 +
  3 +/**
  4 + * 搭配区块
  5 + *
  6 + * @constructor
  7 + */
  8 +function CollocationBlock() {
  9 + this.elem = $('.collocation-block');
  10 + this.container = this.elem.children('.thumb-container');
  11 + this.elem.find('.prod');
  12 + this.prods = this.elem.find('.prod');
  13 +
  14 + //this.fixedContainer = $('#wrapper')
  15 + // .after(this.container.clone().addClass('fixed-thumb-container fixed-bottom'))
  16 + // .next('.thumb-container');
  17 +
  18 + //lazyLoad(this.fixedContainer.find('.lazy'));
  19 +
  20 + this.container.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
  21 +
  22 + // this.fixedContainer.delegate('.thumb', 'touchend', this._touchHandler.bind(this));
  23 +
  24 + this.thumbs = this.container.find('li');
  25 +
  26 + // this.fixedThumbs = this.fixedContainer.find('li');
  27 +
  28 + // 初始化箭头位置
  29 + this._updateCollocationArrowPos(this.thumbs.filter('.focus'));
  30 +
  31 + var scrollFn = () => {
  32 + var pos = this.container.offset(),
  33 + posFixed = this.fixedContainer.offset();
  34 + var visible = false;
  35 +
  36 +
  37 + if (posFixed.top >= pos.top) {
  38 + visible = false;
  39 + } else {
  40 + visible = true;
  41 + }
  42 +
  43 + if (posFixed.top + this.fixedContainer.height() > $('ul.brand-list').offset().top) {
  44 + visible = false;
  45 + } else if (pos.top < $(window).scrollTop()) {
  46 + visible = true;
  47 + this.fixedContainer.removeClass('fixed-bottom').addClass('fixed-top');
  48 + } else {
  49 + this.fixedContainer.removeClass('fixed-top').addClass('fixed-bottom');
  50 + }
  51 +
  52 + this.fixedContainer.css({
  53 + visibility: visible ? 'visible' : 'hidden'
  54 + });
  55 + };
  56 +
  57 + //$(document).on('scroll', scrollFn);
  58 + //$(document).on('touchmove', scrollFn);
  59 +
  60 +}
  61 +
  62 +CollocationBlock.exists = function() {
  63 + return $('.collocation-block').size() > 0;
  64 +};
  65 +
  66 +$.extend(CollocationBlock.prototype, {
  67 + /**
  68 + * 计算搭配的箭头的位置
  69 + * @param current 当前focus的搭配项
  70 + */
  71 + _updateCollocationArrowPos: function(current) {
  72 + var left = current.offset().left,
  73 + bgPos = -$(window).width() + left + (this.thumbs.width() / 2) + 'px';
  74 +
  75 + this.container.css({
  76 + backgroundPosition: bgPos + ' bottom'
  77 + });
  78 +
  79 + /*
  80 + this.fixedContainer.css({
  81 + backgroundPosition: bgPos + ' bottom'
  82 + });
  83 + */
  84 + },
  85 +
  86 + /**
  87 + * 搭配thumb的touch事件句柄
  88 + *
  89 + * @param e
  90 + * @private
  91 + */
  92 + _touchHandler: function(e) {
  93 + var current = $(e.currentTarget),
  94 + index = current.index();
  95 +
  96 + if (current.hasClass('focus')) {
  97 + return;
  98 + }
  99 +
  100 + this.thumbs.removeClass('focus');
  101 +
  102 + // this.fixedThumbs.removeClass('focus');
  103 +
  104 + current.addClass('focus');
  105 +
  106 + // 更新箭头位置
  107 + this._updateCollocationArrowPos(current);
  108 +
  109 + this.prods.not('.hide').addClass('hide');
  110 + this.curProds = this.prods.eq(index);
  111 + this.curProds.removeClass('hide');
  112 +
  113 + $('body').animate({
  114 + scrollTop: this.elem.offset().top
  115 + }, 400);
  116 + }
  117 +});
  118 +
  119 +
  120 +module.exports = CollocationBlock;
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 - Hammer = require('yoho-hammer'), 8 + Hammer = require('../common/toy-hammer'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 lazyLoad = require('yoho-jquery-lazyload'), 10 lazyLoad = require('yoho-jquery-lazyload'),
11 Swiper = require('yoho-swiper2'); 11 Swiper = require('yoho-swiper2');
@@ -7,118 +7,46 @@ require('guang/info-index.page.css'); @@ -7,118 +7,46 @@ require('guang/info-index.page.css');
7 7
8 var $ = require('yoho-jquery'), 8 var $ = require('yoho-jquery'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 - lazyLoad = require('yoho-jquery-lazyload'),  
11 - IScroll = require('yoho-iscroll/build/iscroll-probe'); 10 + lazyLoad = require('yoho-jquery-lazyload');
12 11
13 var $authorIntro = $('.author .intro'); 12 var $authorIntro = $('.author .intro');
14 13
15 -var pageInIscroll = false;  
16 -  
17 -var hasCollocationBlock = $('.collocation-block').length > 0 ? true : false;  
18 -  
19 // collocation block variable 14 // collocation block variable
20 -var thumbWidth = 0,  
21 - $fixedThumbContainer = $(''),  
22 - $coBlock, $thumbContainer, $thumbs, $prods,  
23 - scrollToEl,  
24 - myScroll,  
25 - winW = $(window).width();  
26 -  
27 -scrollToEl = document.querySelector('#wrapper .collocation-block');  
28 - 15 +var $fixedThumbContainer = $(''),
  16 + $coBlock,
  17 + $thumbContainer = $('.thumb-container');
29 18
30 require('../common'); 19 require('../common');
31 require('../plugin/wx-share')(); 20 require('../plugin/wx-share')();
32 require('./detail-dynamic'); 21 require('./detail-dynamic');
33 22
34 -/**  
35 - * 计算搭配的箭头的位置  
36 - * @param $curPos 当前focus的搭配项  
37 - */  
38 -function posCollocationArrow($curCo) {  
39 - var left = $curCo.offset().left,  
40 - bgPos = -winW + left + (thumbWidth / 2) + 'px';  
41 -  
42 - $thumbContainer.css({  
43 - backgroundPosition: bgPos + ' bottom'  
44 - });  
45 -  
46 - if (pageInIscroll) {  
47 - $fixedThumbContainer.css({  
48 - backgroundPosition: bgPos + ' bottom'  
49 - });  
50 - }  
51 -}  
52 -  
53 -// 搭配thumb的touch事件句柄  
54 -function thumbTouchEvt(e) {  
55 - var $curCo = $(e.currentTarget),  
56 - index = $curCo.index(),  
57 - $brother, $brotherCo,  
58 - $curProds;  
59 -  
60 - if ($curCo.hasClass('focus')) {  
61 - return;  
62 - }  
63 -  
64 - $thumbs.filter('.focus').removeClass('focus');  
65 -  
66 - if (pageInIscroll) {  
67 - if ($curCo.closest('.fixed-thumb-container').length > 0) {  
68 - $brother = $thumbContainer;  
69 - } else {  
70 - $brother = $fixedThumbContainer;  
71 - }  
72 -  
73 - $brotherCo = $brother.find('.thumb').eq(index);  
74 - $fixedThumbContainer.find('.thumb.focus').removeClass('focus');  
75 - $brotherCo.addClass('focus');  
76 - }  
77 -  
78 - $curCo.addClass('focus');  
79 -  
80 - // 定位arrow  
81 - posCollocationArrow($curCo);  
82 -  
83 - $prods.not('.hide').addClass('hide');  
84 - $curProds = $prods.eq(index);  
85 - $curProds.removeClass('hide'); 23 +var CollactionBlock = require('./collocation-block');
86 24
87 - //  
88 - lazyLoad($curProds.find('.lazy'));  
89 -  
90 - if (pageInIscroll) {  
91 - if (myScroll) {  
92 - myScroll.scrollToElement(scrollToEl, 400);  
93 - }  
94 - } else {  
95 - $('body').animate({  
96 - scrollTop: $coBlock.offset().top  
97 - }, 400);  
98 - }  
99 -  
100 - myScroll && myScroll.refresh();  
101 -} 25 +$('#wrapper').css({
  26 + 'overflow-y': 'scroll'
  27 +});
102 28
103 // 初始化iscroll 29 // 初始化iscroll
104 function initIscroll() { 30 function initIscroll() {
105 - var $scroller = $('#scroller'),  
106 - $yohoHeader = $('.yoho-header');  
107 - 31 + var $yohoHeader = $('.yoho-header');
108 var hH = 0, 32 var hH = 0,
109 winH, tcH, cbH, cbTop, fixedThumbDom; 33 winH, tcH, cbH, cbTop, fixedThumbDom;
110 34
  35 + if (CollactionBlock.exists()) {
  36 + new CollactionBlock();
  37 + }
  38 +
111 // 考虑通用头部的影响：对offset().top以及winH做对应偏移 39 // 考虑通用头部的影响：对offset().top以及winH做对应偏移
112 if ($yohoHeader.length > 0) { 40 if ($yohoHeader.length > 0) {
113 hH = $yohoHeader.outerHeight(); 41 hH = $yohoHeader.outerHeight();
114 } 42 }
115 43
  44 + /*
116 myScroll = new IScroll('#wrapper', { 45 myScroll = new IScroll('#wrapper', {
117 probeType: 3, 46 probeType: 3,
118 mouseWheel: true, 47 mouseWheel: true,
119 click: true 48 click: true
120 }); 49 });
121 -  
122 document.addEventListener('touchmove', function(e) { 50 document.addEventListener('touchmove', function(e) {
123 e.preventDefault(); 51 e.preventDefault();
124 }, false); 52 }, false);
@@ -130,16 +58,21 @@ function initIscroll() { @@ -130,16 +58,21 @@ function initIscroll() {
130 return; 58 return;
131 } 59 }
132 60
  61 + */
  62 +
  63 +
133 winH = $(window).height() - hH; 64 winH = $(window).height() - hH;
134 fixedThumbDom = $fixedThumbContainer[0]; 65 fixedThumbDom = $fixedThumbContainer[0];
135 66
136 - tcH = $thumbContainer.outerHeight(); 67 + tcH = $thumbContainer ? $thumbContainer.outerHeight() : 0;
  68 + if ($coBlock) {
137 cbH = $coBlock.outerHeight(); 69 cbH = $coBlock.outerHeight();
138 cbTop = $coBlock.offset().top - hH; 70 cbTop = $coBlock.offset().top - hH;
  71 + }
139 72
140 - myScroll.on('scroll', function() { 73 + $(window).on('scroll', function() {
141 var sTop = -this.y; 74 var sTop = -this.y;
142 - var classList = fixedThumbDom.className; 75 + var classList = fixedThumbDom && fixedThumbDom.className;
143 76
144 if (sTop <= cbTop - winH + tcH) { 77 if (sTop <= cbTop - winH + tcH) {
145 if (classList.indexOf('fixed-bottom') === -1) { 78 if (classList.indexOf('fixed-bottom') === -1) {
@@ -174,25 +107,24 @@ function initIscroll() { @@ -174,25 +107,24 @@ function initIscroll() {
174 .removeClass('absolute'); 107 .removeClass('absolute');
175 } 108 }
176 } 109 }
177 - $scroller.trigger('scroll');  
178 }); 110 });
179 } 111 }
180 112
181 -// window onload 后重新refresh iscroll  
182 -window.onload = function() { 113 +/*
  114 + // window onload 后重新refresh iscroll
  115 + window.onload = function() {
183 myScroll && myScroll.refresh(); 116 myScroll && myScroll.refresh();
184 -}; 117 + };
185 118
186 -// 图片加载完成之后重新 refresh iscroll  
187 -$('img').on('load', function() { 119 + // 图片加载完成之后重新 refresh iscroll
  120 + $('img').on('load', function() {
188 myScroll && myScroll.refresh(); 121 myScroll && myScroll.refresh();
189 -}); 122 + });
  123 + */
190 124
191 // 初始化页面,包括是否使用iscorll初始化页面 125 // 初始化页面,包括是否使用iscorll初始化页面
192 // 接口暴露在HTML中，使用压缩名 126 // 接口暴露在HTML中，使用压缩名
193 (function() { 127 (function() {
194 - var useIscroll;  
195 - var isIphone = navigator.userAgent.indexOf('iPhone') > 0 ? true : false;  
196 var $this, $title; 128 var $this, $title;
197 129
198 // pagecache 前端判断是否显示头 130 // pagecache 前端判断是否显示头
@@ -201,17 +133,10 @@ $('img').on('load', function() { @@ -201,17 +133,10 @@ $('img').on('load', function() {
201 133
202 isHeader && $('#yoho-header').remove(); 134 isHeader && $('#yoho-header').remove();
203 135
204 - if ($('.guang-detail-page').hasClass('guang-detail')) {  
205 - useIscroll = true;  
206 - } else if ($('.guang-detail-page').hasClass('guang-ezine')) {  
207 - useIscroll = false;  
208 - }  
209 $('.main-wrap').css({ 136 $('.main-wrap').css({
210 position: 'static' 137 position: 'static'
211 }); 138 });
212 139
213 - pageInIscroll = isIphone && useIscroll;  
214 -  
215 ellipsis.init(); 140 ellipsis.init();
216 141
217 if ($('.good-detail-text .name').length > 0) { 142 if ($('.good-detail-text .name').length > 0) {
@@ -235,46 +160,6 @@ $('img').on('load', function() { @@ -235,46 +160,6 @@ $('img').on('load', function() {
235 $authorIntro.css('padding-top', 0); 160 $authorIntro.css('padding-top', 0);
236 } 161 }
237 162
238 - if (pageInIscroll) {  
239 - if ($('.yoho-header').length > 0) {  
240 - $('#wrapper').addClass('ios has-head');  
241 - } else {  
242 - $('#wrapper').addClass('ios');  
243 - }  
244 - }  
245 -  
246 - // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有  
247 - if (hasCollocationBlock) {  
248 - $coBlock = $('.collocation-block');  
249 - $thumbContainer = $coBlock.children('.thumb-container');  
250 - $thumbs = $thumbContainer.find('li');  
251 - $prods = $coBlock.find('.prod');  
252 -  
253 - thumbWidth = $thumbs.width();  
254 -  
255 - if (pageInIscroll) {  
256 - $fixedThumbContainer = $('#wrapper')  
257 - .after($thumbContainer.clone().addClass('fixed-thumb-container fixed-bottom'))  
258 - .next('.thumb-container');  
259 -  
260 - // load img of fixed thumb container  
261 - lazyLoad($fixedThumbContainer.find('.lazy'), {  
262 - event: 'sporty'  
263 - });  
264 - }  
265 -  
266 - // Init Arrow Position  
267 - posCollocationArrow($thumbs.filter('.focus'));  
268 -  
269 - $thumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);  
270 -  
271 - if (pageInIscroll) {  
272 - $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);  
273 -  
274 - }  
275 - }  
276 -  
277 - if (pageInIscroll) {  
278 initIscroll(); 163 initIscroll();
279 - }  
280 }()); 164 }());
  165 +
@@ -5,6 +5,7 @@ @@ -5,6 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
  8 + Hammer = require('../common/toy-hammer'),
8 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
9 lazyLoad = require('yoho-jquery-lazyload'), 10 lazyLoad = require('yoho-jquery-lazyload'),
10 Swiper = require('yoho-swiper2'); 11 Swiper = require('yoho-swiper2');
@@ -5,7 +5,7 @@ @@ -5,7 +5,7 @@
5 */ 5 */
6 6
7 var $ = require('yoho-jquery'), 7 var $ = require('yoho-jquery'),
8 - Hammer = require('yoho-hammer'), 8 + Hammer = require('../common/toy-hammer'),
9 ellipsis = require('yoho-mlellipsis'), 9 ellipsis = require('yoho-mlellipsis'),
10 lazyLoad = require('yoho-jquery-lazyload'); 10 lazyLoad = require('yoho-jquery-lazyload');
11 11