fe / yohoblk-wap · Commits

Go to a project

Authored by 徐炜
Commit 8a52317f9427aff19866421aae5868bf14247075 1 parent 4e73b585

LazyLoad优化

Inline Side-by-side
Showing 22 changed files with 52 additions and 26 deletions
@@ -144,3 +144,4 @@ public/bundle/* @@ -144,3 +144,4 @@ public/bundle/*
144 *.log.* 144 *.log.*
145 nbproject/* 145 nbproject/*
146 .DS_Store 146 .DS_Store
  147 +.devhost
@@ -22,6 +22,7 @@ const session = require('express-session'); @@ -22,6 +22,7 @@ const session = require('express-session');
22 const memcached = require('connect-memcached'); 22 const memcached = require('connect-memcached');
23 const hbs = require('express-handlebars'); 23 const hbs = require('express-handlebars');
24 const pkg = require('./package.json'); 24 const pkg = require('./package.json');
  25 +const devtools = require('./doraemon/middleware/devtools');
25 26
26 const app = express(); 27 const app = express();
27 const MemcachedStore = memcached(session); 28 const MemcachedStore = memcached(session);
@@ -40,6 +41,10 @@ global.doraemon = path.resolve('./doraemon'); @@ -40,6 +41,10 @@ global.doraemon = path.resolve('./doraemon');
40 41
41 const logger = global.yoho.logger; 42 const logger = global.yoho.logger;
42 43
  44 +if (app.locals.devEnv) {
  45 + app.use(devtools());
  46 +}
  47 +
43 app.set('view engine', '.hbs'); 48 app.set('view engine', '.hbs');
44 app.set('views', './doraemon/views'); 49 app.set('views', './doraemon/views');
45 app.engine('.hbs', hbs({ 50 app.engine('.hbs', hbs({
@@ -15,9 +15,9 @@ @@ -15,9 +15,9 @@
15 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window); 15 (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
16 </script> 16 </script>
17 {{#if devEnv}} 17 {{#if devEnv}}
18 - <link rel="stylesheet" media="all" href="//localhost:5004/css/index.css"> 18 + <link rel="stylesheet" media="all" href="//{{devHost}}:5004/css/index.css">
19 {{#unless noLocalCSS}} 19 {{#unless noLocalCSS}}
20 - <link rel="stylesheet" media="all" href="//localhost:5004/{{module}}.{{page}}.css"> 20 + <link rel="stylesheet" media="all" href="//{{devHost}}:5004/{{module}}.{{page}}.css">
21 {{/unless}} 21 {{/unless}}
22 {{^}} 22 {{^}}
23 <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-wap/{{version}}/index.css"> 23 <link rel="stylesheet" href="//cdn.yoho.cn/yohoblk-wap/{{version}}/index.css">
@@ -32,9 +32,9 @@ @@ -32,9 +32,9 @@
32 </div> 32 </div>
33 33
34 {{#if devEnv}} 34 {{#if devEnv}}
35 - <script src="//localhost:5004/libs.js"></script> 35 + <script src="//{{devHost}}:5004/libs.js"></script>
36 {{#unless noLocalJS}} 36 {{#unless noLocalJS}}
37 - <script src="//localhost:5004/{{module}}.{{page}}.js"></script> 37 + <script src="//{{devHost}}:5004/{{module}}.{{page}}.js"></script>
38 {{/unless}} 38 {{/unless}}
39 {{^}} 39 {{^}}
40 <script src="//cdn.yoho.cn/yohoblk-wap/{{version}}/libs.js"></script> 40 <script src="//cdn.yoho.cn/yohoblk-wap/{{version}}/libs.js"></script>
@@ -11,7 +11,7 @@ const brandListBox = require('channel/brand-list-box.vue'); @@ -11,7 +11,7 @@ const brandListBox = require('channel/brand-list-box.vue');
11 11
12 require('common/vue-filter')(Vue); 12 require('common/vue-filter')(Vue);
13 13
14 -Vue.use(lazyload); 14 +Vue.use(lazyload, { preLoad: 3 });
15 15
16 new Vue({ 16 new Vue({
17 el: '#brand-list', 17 el: '#brand-list',
@@ -4,7 +4,7 @@ const cateRes = require('channel/cate-resource-box.vue'); @@ -4,7 +4,7 @@ const cateRes = require('channel/cate-resource-box.vue');
4 4
5 require('common/vue-filter')(Vue); 5 require('common/vue-filter')(Vue);
6 6
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 8
9 new Vue({ 9 new Vue({
10 el: '#cate-resource', 10 el: '#cate-resource',
@@ -6,7 +6,7 @@ const channel = require('channel/index.vue'); @@ -6,7 +6,7 @@ const channel = require('channel/index.vue');
6 6
7 require('common/vue-filter')(Vue); 7 require('common/vue-filter')(Vue);
8 8
9 -Vue.use(lazyload); 9 +Vue.use(lazyload, { preLoad: 3 });
10 Vue.use(infinitScroll); 10 Vue.use(infinitScroll);
11 11
12 new Vue({ 12 new Vue({
@@ -5,7 +5,7 @@ const sidebar = require('channel/sidebar.vue'); @@ -5,7 +5,7 @@ const sidebar = require('channel/sidebar.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue({ 10 new Vue({
11 el: '#sidebar', 11 el: '#sidebar',
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 7
8 module.exports = (Vue) => { 8 module.exports = (Vue) => {
9 Vue.directive('lazy-html', function(html) { 9 Vue.directive('lazy-html', function(html) {
  10 + // TODO 首屏幕不使用
10 html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img v-lazy="\'$1\'">'); 11 html = html.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, '<img v-lazy="\'$1\'">');
11 this.el.innerHTML = html; 12 this.el.innerHTML = html;
12 this.vm.$compile(this.el); 13 this.vm.$compile(this.el);
@@ -4,7 +4,7 @@ const directive = require('common/vue-directive'); @@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
4 const app = require('editorial/detail.vue'); 4 const app = require('editorial/detail.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 Vue.use(directive); 8 Vue.use(directive);
9 9
10 new Vue({ 10 new Vue({
@@ -8,7 +8,7 @@ const Vue = require('vue'); @@ -8,7 +8,7 @@ const Vue = require('vue');
8 const lazyload = require('vue-lazyload'); 8 const lazyload = require('vue-lazyload');
9 const infinitScroll = require('vue-infinite-scroll'); 9 const infinitScroll = require('vue-infinite-scroll');
10 10
11 -Vue.use(lazyload); 11 +Vue.use(lazyload, { preLoad: 3 });
12 Vue.use(infinitScroll); 12 Vue.use(infinitScroll);
13 require('common/vue-filter')(Vue); 13 require('common/vue-filter')(Vue);
14 14
@@ -17,4 +17,4 @@ new Vue({ @@ -17,4 +17,4 @@ new Vue({
17 } 17 }
18 }); 18 });
19 19
20 -Vue.use(lazyload); 20 +Vue.use(lazyload, { preLoad: 3 });
@@ -5,6 +5,6 @@ const exchange = require('me/exchange.vue'); @@ -5,6 +5,6 @@ const exchange = require('me/exchange.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue(exchange); 10 new Vue(exchange);
@@ -5,7 +5,7 @@ const refund = require('me/refund.vue'); @@ -5,7 +5,7 @@ const refund = require('me/refund.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 7
8 -Vue.use(lazyload); 8 +Vue.use(lazyload, { preLoad: 3 });
9 9
10 new Vue({ 10 new Vue({
11 el: '#refund', 11 el: '#refund',
@@ -4,7 +4,7 @@ const directive = require('common/vue-directive'); @@ -4,7 +4,7 @@ const directive = require('common/vue-directive');
4 const app = require('product/detail/index.vue'); 4 const app = require('product/detail/index.vue');
5 5
6 require('common/vue-filter')(Vue); 6 require('common/vue-filter')(Vue);
7 -Vue.use(lazyload); 7 +Vue.use(lazyload, { preLoad: 3 });
8 Vue.use(directive); 8 Vue.use(directive);
9 9
10 new Vue({ 10 new Vue({
@@ -10,8 +10,9 @@ const lazyload = require('vue-lazyload'); @@ -10,8 +10,9 @@ const lazyload = require('vue-lazyload');
10 const shareBox = require('product/shop/share-box.vue'); 10 const shareBox = require('product/shop/share-box.vue');
11 11
12 require('common/vue-filter')(Vue); 12 require('common/vue-filter')(Vue);
13 -  
14 -Vue.use(lazyload); 13 +Vue.use(lazyload, {
  14 + preLoad: 3
  15 +});
15 16
16 new Vue({ 17 new Vue({
17 el: '#share', 18 el: '#share',
@@ -9,7 +9,9 @@ const lazyload = require('vue-lazyload'); @@ -9,7 +9,9 @@ const lazyload = require('vue-lazyload');
9 const infinitScroll = require('vue-infinite-scroll'); 9 const infinitScroll = require('vue-infinite-scroll');
10 10
11 require('common/vue-filter')(Vue); 11 require('common/vue-filter')(Vue);
12 -Vue.use(lazyload); 12 +Vue.use(lazyload, {
  13 + preLoad: 3
  14 +});
13 Vue.use(infinitScroll); 15 Vue.use(infinitScroll);
14 16
15 const shopBox = require('product/shop/shop-box.vue'); 17 const shopBox = require('product/shop/shop-box.vue');
@@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
31 const lazyload = require('vue-lazyload'); 31 const lazyload = require('vue-lazyload');
32 const infinitScroll = require('vue-infinite-scroll'); 32 const infinitScroll = require('vue-infinite-scroll');
33 33
34 - Vue.use(lazyload); 34 + Vue.use(lazyload, { preLoad: 3 });
35 Vue.use(infinitScroll); 35 Vue.use(infinitScroll);
36 36
37 let bus = require('common/vue-bus'); 37 let bus = require('common/vue-bus');
@@ -23,7 +23,7 @@ @@ -23,7 +23,7 @@
23 23
24 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); 24 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
25 25
26 - Vue.use(lazyload); 26 + Vue.use(lazyload, { preLoad: 3 });
27 Vue.use(infinitScroll); 27 Vue.use(infinitScroll);
28 require('common/vue-filter')(Vue); 28 require('common/vue-filter')(Vue);
29 29
@@ -21,7 +21,7 @@ @@ -21,7 +21,7 @@
21 21
22 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, ''))); 22 let locationQuery = qs(decodeURIComponent(location.search.replace(/^\?/, '')));
23 23
24 - Vue.use(lazyload); 24 + Vue.use(lazyload, { preLoad: 3 });
25 Vue.use(infinitScroll); 25 Vue.use(infinitScroll);
26 require('common/vue-filter')(Vue); 26 require('common/vue-filter')(Vue);
27 27
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 const order = require('component/product/order.vue'); 18 const order = require('component/product/order.vue');
19 const list = require('component/product/list.vue'); 19 const list = require('component/product/list.vue');
20 20
21 - Vue.use(lazyload); 21 + Vue.use(lazyload, { preLoad: 3 });
22 Vue.use(infinitScroll); 22 Vue.use(infinitScroll);
23 23
24 require('common/vue-filter')(Vue); 24 require('common/vue-filter')(Vue);
1 <template> 1 <template>
2 - <top-bar :share-data="shareData"></top-bar> 2 + <top-bar :share-data="shareData" :show-top-bar="showTopBar"></top-bar>
  3 +
3 <shop-top :shop-info="shopInfo"></shop-top> 4 <shop-top :shop-info="shopInfo"></shop-top>
4 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'> 5 <div :class='{"shop-goods-top": !shopInfo.isBlkShop}'>
5 <goods-list :data="productList" :empty="empty"></goods-list> 6 <goods-list :data="productList" :empty="empty"></goods-list>
6 </div> 7 </div>
7 <filter :config="filterConfig" v-ref:filter></filter> 8 <filter :config="filterConfig" v-ref:filter></filter>
  9 + <div id="timer" style="position: fixed; z-index: 100; bottom: 0">{{timer}}</div>
8 </template> 10 </template>
9 <style> 11 <style>
10 #shop { 12 #shop {
@@ -34,9 +36,10 @@ @@ -34,9 +36,10 @@
34 return { 36 return {
35 shareData: {}, // 分享相关数据 37 shareData: {}, // 分享相关数据
36 shopInfo: {}, // 店铺介绍相关数据 38 shopInfo: {}, // 店铺介绍相关数据
37 - 39 + timer: 0,
38 sortConfig: {}, 40 sortConfig: {},
39 filterConfig: {}, 41 filterConfig: {},
  42 + showTopBar: false,
40 43
41 // query 44 // query
42 url: '/product/shop/goods.json', 45 url: '/product/shop/goods.json',
@@ -73,7 +76,7 @@ @@ -73,7 +76,7 @@
73 /* 获取店铺简介相关数据 */ 76 /* 获取店铺简介相关数据 */
74 getShopInfo() { 77 getShopInfo() {
75 $.get({ 78 $.get({
76 - async: false, 79 + // async: false,
77 url: '/product/shop/info.json', 80 url: '/product/shop/info.json',
78 data: { 81 data: {
79 domain: $shop.data('domain'), 82 domain: $shop.data('domain'),
@@ -103,6 +106,8 @@ @@ -103,6 +106,8 @@
103 } else { 106 } else {
104 this.shopInfo.showBrandInfo = false; 107 this.shopInfo.showBrandInfo = false;
105 } 108 }
  109 +
  110 + this.showTopBar = true;
106 }).fail(() => { 111 }).fail(() => {
107 tip('网络出错~'); 112 tip('网络出错~');
108 }); 113 });
@@ -177,6 +182,11 @@ @@ -177,6 +182,11 @@
177 self.$set('filter', val); 182 self.$set('filter', val);
178 self.$refs.filter.isVisible = false; 183 self.$refs.filter.isVisible = false;
179 }); 184 });
  185 + },
  186 + init() {
  187 + setInterval(()=> {
  188 + this.timer = new Date().getTime();
  189 + }, 1)
180 } 190 }
181 }; 191 };
182 192
1 <template> 1 <template>
  2 + <div :style="{display: topBarDisplay}">
2 <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header> 3 <cheader :title="title" :class="{ghost: shareData.isBlkShop}" :fixed="shareData.isBlkShop" v-ref:header>
3 <template slot="right" v-on:scroll=""> 4 <template slot="right" v-on:scroll="">
4 <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span> 5 <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
@@ -7,6 +8,7 @@ @@ -7,6 +8,7 @@
7 <span class="icon" @click="showFilter()">&#xe60b;</span> 8 <span class="icon" @click="showFilter()">&#xe60b;</span>
8 </template> 9 </template>
9 </cheader> 10 </cheader>
  11 + </div>
10 </template> 12 </template>
11 13
12 <style> 14 <style>
@@ -30,8 +32,9 @@ @@ -30,8 +32,9 @@
30 }, 32 },
31 props: { 33 props: {
32 shareData: { 34 shareData: {
33 - type: Object  
34 - } 35 + type: Object,
  36 + },
  37 + showTopBar: false
35 }, 38 },
36 computed: { 39 computed: {
37 title() { 40 title() {
@@ -42,6 +45,9 @@ @@ -42,6 +45,9 @@
42 } 45 }
43 46
44 return result; 47 return result;
  48 + },
  49 + topBarDisplay() {
  50 + return this.showTopBar ? 'block' : 'none';
45 } 51 }
46 }, 52 },
47 components: { 53 components: {