店铺优化2

梁志锋
Commit c3f4bc59fc7c5f58bbed1b19d641f6d53468b136 1 parent a325e524
Showing 2 changed files with 62 additions and 50 deletions
static/js/product/shop.js
template/m.yohobuy.com/actions/product/shop/index.phtml
--- a/static/js/product/shop.js
View file @c3f4bc5
+++ b/static/js/product/shop.js
View file @c3f4bc5
@@ -121,9 +121,7 @@ if ($('.category-list li').length % 4 !== 0) {
 if ($('.category-list li').length < 4) {
     $('.category-list').addClass('category-list-top-board');
     $('.category-list').find('.buriedpoint').addClass('category-list-only-one-row');
-}
-
-if ($('.category-list li').length >= 5) {
+} else if ($('.category-list li').length >= 5) {
     for (listIndex = listModValue; listIndex >= 0; listIndex--) {
         $('.category-list li').eq(listCount - 4 + listIndex - 1).addClass('category-list-last-full-row');
     }
@@ -190,7 +188,7 @@ function newData(callback) {
     req.callBack = function(data) {
         $('#new-arrival').append(data);
         navInfo.new.page++;
-        myScroll.refresh();
+        //myScroll.refresh();
         lazyLoad($('#new-arrival .lazy'));
         scH = $('#scroller').outerHeight();
         searching = false;
@@ -215,7 +213,7 @@ function hotData(callback) {
     req.callBack = function(data) {
         $('#popularity').append(data);
         navInfo.hot.page++;
-        myScroll.refresh();
+        //myScroll.refresh();
         lazyLoad($('#popularity .lazy'));
         scH = $('#scroller').outerHeight();
         searching = false;
@@ -232,11 +230,7 @@ function tabChange(dom, index) {
 }
-myScroll = new IScroll('#wrapper', {
-    probeType: 3,
-    mouseWheel: true,
-    click: true
-});
+
 //首页导航
 (function(nav, posNav, main) {
@@ -263,7 +257,7 @@ myScroll = new IScroll('#wrapper', {
             viewType = 3;
         } else if (activeTab === 'home-page') {
-            myScroll && myScroll.refresh();
+            //myScroll && myScroll.refresh();
             scH = $('#scroller').outerHeight();
             $nav1.removeClass('fixed-top absolute');
             $nav2.removeClass('fixed-top absolute');
@@ -319,7 +313,8 @@ function reNav1Pos() {
     }
 }
-myScroll.on('scroll', function() {
+
+function scrollHandler() {
     var scrollCall,
         sTop = -this.y;
@@ -428,27 +423,7 @@ myScroll.on('scroll', function() {
             });
         }
     }
-});
-
-myScroll.on('scrollStart', function() {
-
-    // stop auto play when scroll
-    bannerSwiper && bannerSwiper.stopAutoplay();
-
-    multiSwiper && multiSwiper.stopAutoplay();
-});
-
-myScroll.on('scrollEnd', function() {
-
-    // start auto play when scroll end
-    bannerSwiper && bannerSwiper.startAutoplay();
-
-    multiSwiper && multiSwiper.startAutoplay();
-
-    $('#scroller').trigger('scroll');
-});
-
-
+}
 document.addEventListener('touchmove', function(e) {
     // sub classify不阻止默认事件
@@ -462,18 +437,50 @@ document.addEventListener('touchmove', function(e) {
 }*/
-//window onload 后重新refresh iscroll
-$(window).load(function() {
-    myScroll && myScroll.refresh();
+//window ready 后重新refresh iscroll
+$(window).ready(function() {
+    //myScroll && myScroll.refresh();
     imgH = $('#nav-top').outerHeight();
     nav1H = $('#nav').outerHeight();
     main1H = $('#nav-main').height();
     main1oH = $('#nav-main').outerHeight();
     nav2H = $('#list-nav').outerHeight();
     main2oH = $('#goods-container').outerHeight();
-    setTimeout(function() {
+
+
+    myScroll = new IScroll('#wrapper', {
+        probeType: 2,
+        mouseWheel: false,
+        click: true
+    });
+
+    //setTimeout(function() {
         scH = $('#scroller').outerHeight();
-    }, 1000);
+    //}, 1000);
+
+
+    myScroll.on('scroll', function() {
+        window.requestAnimationFrame(scrollHandler);
+    });
+
+    myScroll.on('scrollStart', function() {
+
+        // stop auto play when scroll
+        bannerSwiper && bannerSwiper.stopAutoplay();
+
+        multiSwiper && multiSwiper.stopAutoplay();
+    });
+
+    myScroll.on('scrollEnd', function() {
+
+        // start auto play when scroll end
+        bannerSwiper && bannerSwiper.startAutoplay();
+
+        multiSwiper && multiSwiper.startAutoplay();
+
+        $('#scroller').trigger('scroll');
+    });
+
 });
 function bindGoodThumbClick() {
@@ -639,7 +646,10 @@ function search(opt) {
             window.rePosFooter();
-            myScroll.refresh();
+            setTimeout(function() {
+                myScroll && myScroll.refresh();
+            }, 0);
+
             reNav1Pos();
             bindGoodThumbClick();
@@ -682,14 +692,14 @@ $subNav.on('touchend touchcancel', function(e) {
             $pre.addClass('active');
             $this.removeClass('active');
-            myScroll.enable();
+            myScroll && myScroll.enable();
         } else {
             $pre = $this.siblings('.active');
             $pre.removeClass('active');
             $this.addClass('active');
-            myScroll.scrollTo(0, -(imgH + main1oH + nav1H));
+            myScroll && myScroll.scrollTo(0, -(imgH + main1oH + nav1H));
             theY = imgH + main1oH + nav1H;
@@ -703,7 +713,7 @@ $subNav.on('touchend touchcancel', function(e) {
                 $('.filter-mask').removeClass('call-by-fix').css('top', $this.offset().top + nav1H);
             }
-            myScroll.disable();
+            myScroll && myScroll.disable();
         }
     } else {
         if ($this.hasClass('new')) {
@@ -717,7 +727,7 @@ $subNav.on('touchend touchcancel', function(e) {
             navType = 'discount';
         }
-        myScroll.enable();
+        myScroll && myScroll.enable();
         nav = navInfo[navType];
@@ -803,7 +813,7 @@ $subNav.on('touchend touchcancel', function(e) {
 filter.initFilter({
     fCbFn: function(option) {
         search(option);
-        myScroll.enable();
+        myScroll && myScroll.enable();
     },
     hCbFn: function() {
@@ -811,7 +821,7 @@ filter.initFilter({
         $pre.addClass('active');
         $pre.siblings('.filter').removeClass('active');
-        myScroll.enable();
+        myScroll && myScroll.enable();
     },
     missStatus: true
 });
@@ -820,14 +830,14 @@ $listNav.on('touchstart', 'li', function(e) {
     $(this).addClass('bytouch');
 }).on('touchend touchcancel', function() {
     $listNav.find('li').removeClass('bytouch');
-    myScroll.refresh();
+    //myScroll && myScroll.refresh();
 });
 $nav2.on('touchstart', 'li', function(e) {
     $(this).addClass('bytouch');
 }).on('touchend touchcancel', function() {
     $nav2.find('li').removeClass('bytouch');
-    myScroll.refresh();
+    //myScroll && myScroll.refresh();
 });
 //底部导航点击
@@ -890,7 +900,7 @@ function postCollect(info) {
             }
             setTimeout(function() {
-                myScroll.refresh();
+                //myScroll.refresh();
                 scH = $('#scroller').outerHeight();
             }, 1000);
             searching = false;
--- a/template/m.yohobuy.com/actions/product/shop/index.phtml
View file @c3f4bc5
+++ b/template/m.yohobuy.com/actions/product/shop/index.phtml
View file @c3f4bc5
@@ -44,7 +44,8 @@
                                 {{#each multiList}}          
                                     <li class="swiper-slide brand-img buriedpoint" data-bp-id="shop_brand_{{img}}_0">
                                         <a href="{{url}}">
-                                            <img src="{{img}}">
+<!--                                            <img src="{{img}}">-->
+                                            <img class="lazy" data-original="{{img}}" alt="">
                                         </a>
                                         <p>{{brandName}}</p>
                                     </li>
@@ -64,7 +65,8 @@
                         {{#each spring}}
                         <li class="buriedpoint" data-bp-id="shop_spring_{{img}}_0" >
                             <a href="{{url}}">
-                                <img src="{{springType}}">
+<!--                                <img src="{{springType}}">-->
+                                <img class="lazy" data-original="{{springType}}" alt="">
                             </a>
                         </li>
                         {{/each}}