模板页面lazyload

@@ -2,5 +2,6 @@ var yohobuyMobile;
 
 require('./public/js/saunter');
 require('./public/js/tag');
+require('./public/js/template');
 
 module.exports = yohobuyMobile;

@@ -2,4 +2,50 @@
  * 模板页js
  * @author: xuqi(qi.xu@yoho.cn)
  * @date；2015/4/14
- */
\ No newline at end of file
+ */
+
+var $ = require('jquery'),
+    timer = null;
+
+require('lazyload');
+
+/**
+ * 页面加载初始化
+ */
+exports.init = function() {
+    $(function() {
+        var $navItem = $('#goods-nav .nav-item'),
+            $goodsContainer = $('#goods-container'),
+            $goodList = $('#goods-container > div'),
+            $npc = $goodList.filter('.new-patterns-container'),
+            $svc = $goodList.filter('.sales-volume-container'),
+            $pc = $goodList.filter('.price-container');
+
+        //img lazyload
+        $('img.lazy').lazyload({
+            skip_invisible : false
+        });
+
+        //切换“最新”，“销量”，“价格”，“筛选”
+        $('#goods-nav').delegate('.nav-item', 'touchstart', function() {
+            var $cur = $(this);
+
+            if ($cur.hasClass('focus')) {
+                return;
+            }
+
+            $navItem.removeClass('focus');
+            $cur.addClass('focus');
+
+            $goodList.addClass('hide');
+            if ($cur.hasClass('new-patterns-nav')) {
+                $npc.removeClass('hide');
+            } else if ($cur.hasClass('sales-volume-nav')) {
+                $svc.removeClass('hide');
+            } else if ($cur.hasClass('price-nav')) {
+                $pc.removeClass('hide');
+            } else {
+            }
+        });
+    });
+};
\ No newline at end of file

-seajs.use(['jquery/1.8.3/jquery-debug'], function($) {
+seajs.use(['jquery/1.8.3/jquery-debug', 'yohobuy-mobile/1.0.0/public/js/template-debug'], function($, tpl) {
     $("#container").removeClass('hide');
+
+    if (tpl) {
+        tpl.init();
+    }
 });
\ No newline at end of file

@@ -77,6 +77,7 @@ body {
 .goods .goods-nav {
     width: 100%;
     padding: 30rem / $pxConvertRem 0;
+    border-bottom: 1px solid #e0e0e0;
 
     .nav-item {
         display: inline-block;
@@ -96,5 +97,5 @@ body {
 
 }
 .goods .goods-container {
-    padding: 20rem / $pxConvertRem;
+    padding: 14rem / $pxConvertRem;
 }

@@ -4,7 +4,7 @@
             {{# introduction.items}}
                 {{# img}}
                     <div class="img-container">
-                        <img class="img" src="{{src}}" alt="{{alt}}">
+                        <img class="img lazy" data-original="{{src}}" alt="{{alt}}">
                     </div>
                 {{/ img}}
                 {{# text}}
@@ -16,7 +16,7 @@
                 <div class="reco-good-info">
                     <div class="img-container">
                         <a href="{{url}}">
-                            <img class="thumb" src="{{thumb}}">
+                            <img class="thumb lazy" data-original="{{thumb}}">
                         </a>
                     </div>
                     <div class="text-container">
@@ -32,13 +32,13 @@
             {{/ recommendation.recos}}
 
             {{# goods}}
-                <ul class="goods-nav">
-                    <li class="nav-item focus">最新</li>
-                    <li class="nav-item">销量</li>
-                    <li class="nav-item">价格</li>
+                <ul id="goods-nav" class="goods-nav">
+                    <li class="nav-item new-patterns-nav focus">最新</li>
+                    <li class="nav-item sales-volume-nav">销量</li>
+                    <li class="nav-item price-nav">价格</li>
                     <li class="nav-item">筛选</li>
                 </ul>
-                <div class="goods-container clearfix">
+                <div id="goods-container" class="goods-container clearfix">
                     <div class="new-patterns-container">
                         {{# newPatterns}}
                             {{> common/good_info}}