逛详情优化

徐炜
Commit 2a4949a7acc5afb30485a7fbdf6f53dca1b0b585 1 parent 22533a5c
Showing 8 changed files with 76 additions and 20 deletions
apps/guang/controllers/info.js
apps/guang/views/action/info/index.hbs
public/js/common.js
public/js/common/toy-hammer.js
public/js/guang/info-common.js
public/js/guang/info-index.page.js
public/js/guang/info.js
public/js/guang/plustar-detail.page.js
--- a/apps/guang/controllers/info.js
View file @2a4949a
+++ b/apps/guang/controllers/info.js
View file @2a4949a
@@ -41,12 +41,22 @@ const _pageArticleContent = (articleContent, isApp, gender) => {
                     joinContentFunc(++i, len);
                 } else if (art.singleImage && art.singleImage.data && art.singleImage.data.length) { // 单张图
                     build.bigImage = helpers.image(art.singleImage.data[0].src, 640, 640);
+
+                    // 前三张图片不使用懒加载，下同
+                    if (i <= 3) {
+                        build.noLazy = true;
+                    }
+
                     contents.push(build);
                     joinContentFunc(++i, len);
                 } else if (art.smallPic && art.smallPic.data && art.smallPic.data.length > 1) {
                     let imgs = art.smallPic.data;
+                    if (i <= 3) {
+                        build.noLazy = true;
+                    }
+
                     build.smallImage = [{
                         src: helpers.image(imgs[0].src, 315, 420)
                     }, {
--- a/apps/guang/views/action/info/index.hbs
View file @2a4949a
+++ b/apps/guang/views/action/info/index.hbs
View file @2a4949a
@@ -5,7 +5,7 @@
                 {{# author}}
                     <div class="author" data-id={{id}}>
                         <a class="clearfix" href={{url}}>
-                            <img class="avatar" src={{avatar}}>
+                            <img class="avatar" src={{image2 avatar mode=2 q=60}}>
                             <span class="name">{{name}}</span>
                             <span class="intro">{{intro}}</span>
                         </a>
@@ -27,15 +27,25 @@
                                 {{#if bigImage}}
                                     <div class="post-block big-img-block">
-                                        <img class="lazy" data-original={{bigImage}}>
+                                        {{#if noLazy}}
+                                            <img src={{image2 bigImage q=60}}>
+                                        {{else}}
+                                            <img class="lazy" data-original={{image2 bigImage q=60}}>
+                                        {{/if}}
                                     </div>
                                 {{/if}}
                                 {{#if smallImage}}
                                     <div class="post-block small-img-block clearfix">
+                                    {{#if noLazy}}
+                                        {{# smallImage}}
+                                            <img src={{image2 src q=60}}>
+                                        {{/ smallImage}}
+                                    {{else}}
                                         {{# smallImage}}
-                                            <img class="lazy" data-original={{src}}>
+                                            <img class="lazy" data-original={{image2 src q=60}}>
                                         {{/ smallImage}}
+                                    {{/if}}
                                     </div>
                                 {{/if}}
--- a/public/js/common.js
View file @2a4949a
+++ b/public/js/common.js
View file @2a4949a
@@ -4,7 +4,7 @@
  * @date: 2015/10/21
  */
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer');
+    Hammer = require('./common/toy-hammer');
 var $footer = $('#yoho-footer'),
     $yohoPage = $('.yoho-page'),
--- a/public/js/common/toy-hammer.js 0 → 100644
View file @2a4949a
+++ b/public/js/common/toy-hammer.js 0 → 100644
View file @2a4949a
+// 超轻量锤子，业务代码不用动，替换掉重量级的 hammer.js
+const $ = require('yoho-jquery');
+
+const ToyHammer = function(elem) {
+    this.elem = elem;
+};
+
+const EVENT_MAPPER = {
+    tap: 'touchstart'
+};
+
+ToyHammer.prototype.on = function(event, fn) {
+    const mappedEvent = EVENT_MAPPER[event];
+
+    if (this.elem && mappedEvent) {
+        $(this.elem).on(mappedEvent, function(e) {
+            fn({
+                srcEvent: e
+            });
+        });
+    }
+};
+
+
+module.exports = ToyHammer;
--- a/public/js/guang/info-common.js
View file @2a4949a
+++ b/public/js/guang/info-common.js
View file @2a4949a
@@ -5,7 +5,7 @@
  */
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload'),
     Swiper = require('yoho-swiper');
--- a/public/js/guang/info-index.page.js
View file @2a4949a
+++ b/public/js/guang/info-index.page.js
View file @2a4949a
@@ -7,8 +7,8 @@ require("guang/info-index.page.css")
 var $ = require('yoho-jquery'),
     ellipsis = require('yoho-mlellipsis'),
-    lazyLoad = require('yoho-jquery-lazyload'),
-    IScroll = require('yoho-iscroll/build/iscroll-probe');
+    lazyLoad = require('yoho-jquery-lazyload');
+//IScroll = require('yoho-iscroll/build/iscroll-probe');
 var $authorIntro = $('.author .intro');
@@ -31,6 +31,10 @@ require('../common');
 require('../plugin/wx-share')();
 require('./detail-dynamic');
+$('#wrapper').css({
+    'overflow-y': 'scroll'
+});
+
 /**
  * 计算搭配的箭头的位置
  * @param $curPos 当前focus的搭配项
@@ -112,13 +116,12 @@ function initIscroll() {
     if ($yohoHeader.length > 0) {
         hH = $yohoHeader.outerHeight();
     }
-
+    /*
      myScroll = new IScroll('#wrapper', {
      probeType: 3,
      mouseWheel: true,
      click: true
      });
-
      document.addEventListener('touchmove', function(e) {
      e.preventDefault();
      }, false);
@@ -130,6 +133,9 @@ function initIscroll() {
         return;
     }
+     */
+
+
     winH = $(window).height() - hH;
     fixedThumbDom = $fixedThumbContainer[0];
@@ -137,7 +143,8 @@ function initIscroll() {
     cbH = $coBlock.outerHeight();
     cbTop = $coBlock.offset().top - hH;
-    myScroll.on('scroll', function() {
+    $(window).on('scroll', function() {
+        console.log(1);
         var sTop = -this.y;
         var classList = fixedThumbDom.className;
@@ -174,19 +181,21 @@ function initIscroll() {
                     .removeClass('absolute');
             }
         }
-        $scroller.trigger('scroll');
+        //$scroller.trigger('scroll');
     });
 }
-// window onload 后重新refresh iscroll
-window.onload = function() {
+/*
+ // window onload 后重新refresh iscroll
+ window.onload = function() {
  myScroll && myScroll.refresh();
-};
+ };
-// 图片加载完成之后重新 refresh iscroll
-$('img').on('load', function() {
+ // 图片加载完成之后重新 refresh iscroll
+ $('img').on('load', function() {
  myScroll && myScroll.refresh();
-});
+ });
+ */
 // 初始化页面,包括是否使用iscorll初始化页面
 // 接口暴露在HTML中，使用压缩名
@@ -234,6 +243,7 @@ $('img').on('load', function() {
         parseInt($authorIntro.css('margin-left'), 10))) {
         $authorIntro.css('padding-top', 0);
     }
+    /*
      if (pageInIscroll) {
      if ($('.yoho-header').length > 0) {
@@ -242,6 +252,7 @@ $('img').on('load', function() {
      $('#wrapper').addClass('ios');
      }
      }
+     */
     // 有搭配模块，iphone使用iscroll初始化滚动并有固定的搭配栏，其他的没有
     if (hasCollocationBlock) {
@@ -270,7 +281,6 @@ $('img').on('load', function() {
         if (pageInIscroll) {
             $fixedThumbContainer.delegate('.thumb', 'touchend', thumbTouchEvt);
-
         }
     }
@@ -278,3 +288,4 @@ $('img').on('load', function() {
         initIscroll();
     }
 }());
+
--- a/public/js/guang/info.js
View file @2a4949a
+++ b/public/js/guang/info.js
View file @2a4949a
@@ -5,7 +5,7 @@
  */
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload'),
     Swiper = require('yoho-swiper');
--- a/public/js/guang/plustar-detail.page.js
View file @2a4949a
+++ b/public/js/guang/plustar-detail.page.js
View file @2a4949a
@@ -5,7 +5,7 @@
  */
 var $ = require('yoho-jquery'),
-    Hammer = require('yoho-hammer'),
+    Hammer = require('../common/toy-hammer'),
     ellipsis = require('yoho-mlellipsis'),
     lazyLoad = require('yoho-jquery-lazyload');