Showing
4 changed files
with
67 additions
and
2 deletions
@@ -16,6 +16,8 @@ require('lazyload'); | @@ -16,6 +16,8 @@ require('lazyload'); | ||
16 | exports.init = function() { | 16 | exports.init = function() { |
17 | $(function() { | 17 | $(function() { |
18 | var $intro = $('#intro'), | 18 | var $intro = $('#intro'), |
19 | + $infoContent = $('#info-content'), | ||
20 | + dataEnd = false, | ||
19 | tpl; | 21 | tpl; |
20 | 22 | ||
21 | //获取相关资讯模板 | 23 | //获取相关资讯模板 |
@@ -54,6 +56,44 @@ exports.init = function() { | @@ -54,6 +56,44 @@ exports.init = function() { | ||
54 | }); | 56 | }); |
55 | 57 | ||
56 | //下拉加载更多 | 58 | //下拉加载更多 |
59 | + $(window).scroll(function() { | ||
60 | + var count; | ||
61 | + if ($(window).scrollTop() + $(window).height() >= $(document).height()) { | ||
62 | + //loadData | ||
63 | + if (dataEnd) { | ||
64 | + //下次下拉时不显示加载图片以及不加载数据 | ||
65 | + } else { | ||
66 | + count = $infoContent.children('.info-block').length; | ||
67 | + $.ajax({ | ||
68 | + type: 'GET', | ||
69 | + url: '/ps/loadInfo', | ||
70 | + data: { | ||
71 | + start: count | ||
72 | + } | ||
73 | + }).then(function(data) { | ||
74 | + var html = '', | ||
75 | + res, | ||
76 | + i; | ||
77 | + if (data.success) { | ||
78 | + if (data.end) { | ||
79 | + dataEnd = true; | ||
80 | + } | ||
81 | + res = data.data; | ||
82 | + for (i = 0; i < res.length; i++) { | ||
83 | + html += Mustache.render(tpl, res[i]); | ||
84 | + } | ||
85 | + if (html !== '') { | ||
86 | + $infoContent.append(html); | ||
57 | 87 | ||
88 | + //lazyload 不包含src即未加载的图片 | ||
89 | + $('img.lazy:not([src])').lazyload({ | ||
90 | + container: $infoContent | ||
91 | + }); | ||
92 | + } | ||
93 | + } | ||
94 | + }); | ||
95 | + } | ||
96 | + } | ||
97 | + }); | ||
58 | }); | 98 | }); |
59 | }; | 99 | }; |
@@ -15,4 +15,5 @@ module.exports = function(app) { | @@ -15,4 +15,5 @@ module.exports = function(app) { | ||
15 | 15 | ||
16 | app.get('/ps', ps.show); //plus + star | 16 | app.get('/ps', ps.show); //plus + star |
17 | app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板 | 17 | app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板 |
18 | + app.get('/ps/loadInfo', ps.loadInfo); //加载相关资讯数据 | ||
18 | }; | 19 | }; |
@@ -4,6 +4,7 @@ | @@ -4,6 +4,7 @@ | ||
4 | * @date: 2015/4/15 | 4 | * @date: 2015/4/15 |
5 | */ | 5 | */ |
6 | var data = require('../../public/js/data')('ps'), | 6 | var data = require('../../public/js/data')('ps'), |
7 | + dataInfos = require('../../public/js/data')('dataInfo'), | ||
7 | path = require('path'), | 8 | path = require('path'), |
8 | fs = require('fs'), | 9 | fs = require('fs'), |
9 | tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html')); | 10 | tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html')); |
@@ -20,11 +21,34 @@ exports.show = function(req, res) { | @@ -20,11 +21,34 @@ exports.show = function(req, res) { | ||
20 | exports.readTpl = function(req, res) { | 21 | exports.readTpl = function(req, res) { |
21 | fs.readFile(tplPath, 'utf8', function(err, data) { | 22 | fs.readFile(tplPath, 'utf8', function(err, data) { |
22 | if (err) { | 23 | if (err) { |
23 | - res.send({success: false}) | 24 | + res.send({success: false}); |
24 | } | 25 | } |
26 | + | ||
27 | + fs.readFile( | ||
28 | + path.normalize(path.join(__dirname, '../partials/common/time-view-like-share.html')), | ||
29 | + 'utf8', function(err, subData) { | ||
30 | + if (err) { | ||
31 | + res.send({success: false}); | ||
32 | + } | ||
33 | + data = data.replace('{{> common/time_view_like_share}}', subData); //Note: 后端需将partials目录替换为内容 | ||
25 | res.send({ | 34 | res.send({ |
26 | success: true, | 35 | success: true, |
27 | data: data | 36 | data: data |
28 | }); | 37 | }); |
29 | }); | 38 | }); |
39 | + }); | ||
30 | }; | 40 | }; |
41 | + | ||
42 | +exports.loadInfo = function(req, res) { | ||
43 | + var start = 1 * req.query.start, | ||
44 | + count = 3, | ||
45 | + end = false; | ||
46 | + if (start + count >= dataInfos.length) { | ||
47 | + end = true; | ||
48 | + } | ||
49 | + res.send({ | ||
50 | + success: true, | ||
51 | + end: end, | ||
52 | + data: dataInfos.slice(start, start + count) | ||
53 | + }); | ||
54 | +} |
@@ -42,7 +42,7 @@ | @@ -42,7 +42,7 @@ | ||
42 | <div class="info-title-container"> | 42 | <div class="info-title-container"> |
43 | <h2 class="info-title">相关文章</div> | 43 | <h2 class="info-title">相关文章</div> |
44 | </div> | 44 | </div> |
45 | - <div class="info-content"> | 45 | + <div id="info-content" class="info-content"> |
46 | {{# info}} | 46 | {{# info}} |
47 | {{> ps/info_item}} | 47 | {{> ps/info_item}} |
48 | {{/ info}} | 48 | {{/ info}} |
-
Please register or login to post a comment