Authored by xuqi

下拉加载请求数据实现

... ... @@ -16,6 +16,8 @@ require('lazyload');
exports.init = function() {
$(function() {
var $intro = $('#intro'),
$infoContent = $('#info-content'),
dataEnd = false,
tpl;
//获取相关资讯模板
... ... @@ -54,6 +56,44 @@ exports.init = function() {
});
//下拉加载更多
$(window).scroll(function() {
var count;
if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
//loadData
if (dataEnd) {
//下次下拉时不显示加载图片以及不加载数据
} else {
count = $infoContent.children('.info-block').length;
$.ajax({
type: 'GET',
url: '/ps/loadInfo',
data: {
start: count
}
}).then(function(data) {
var html = '',
res,
i;
if (data.success) {
if (data.end) {
dataEnd = true;
}
res = data.data;
for (i = 0; i < res.length; i++) {
html += Mustache.render(tpl, res[i]);
}
if (html !== '') {
$infoContent.append(html);
//lazyload 不包含src即未加载的图片
$('img.lazy:not([src])').lazyload({
container: $infoContent
});
}
}
});
}
}
});
});
};
\ No newline at end of file
... ...
... ... @@ -15,4 +15,5 @@ module.exports = function(app) {
app.get('/ps', ps.show); //plus + star
app.get('/ps/readTpl', ps.readTpl); //获取相关资讯模板
app.get('/ps/loadInfo', ps.loadInfo); //加载相关资讯数据
};
\ No newline at end of file
... ...
... ... @@ -4,6 +4,7 @@
* @date: 2015/4/15
*/
var data = require('../../public/js/data')('ps'),
dataInfos = require('../../public/js/data')('dataInfo'),
path = require('path'),
fs = require('fs'),
tplPath = path.normalize(path.join(__dirname, '../partials/ps/info-item.html'));
... ... @@ -20,11 +21,34 @@ exports.show = function(req, res) {
exports.readTpl = function(req, res) {
fs.readFile(tplPath, 'utf8', function(err, data) {
if (err) {
res.send({success: false})
res.send({success: false});
}
res.send({
success: true,
data: data
fs.readFile(
path.normalize(path.join(__dirname, '../partials/common/time-view-like-share.html')),
'utf8', function(err, subData) {
if (err) {
res.send({success: false});
}
data = data.replace('{{> common/time_view_like_share}}', subData); //Note: 后端需将partials目录替换为内容
res.send({
success: true,
data: data
});
});
});
};
\ No newline at end of file
};
exports.loadInfo = function(req, res) {
var start = 1 * req.query.start,
count = 3,
end = false;
if (start + count >= dataInfos.length) {
end = true;
}
res.send({
success: true,
end: end,
data: dataInfos.slice(start, start + count)
});
}
\ No newline at end of file
... ...
... ... @@ -42,7 +42,7 @@
<div class="info-title-container">
<h2 class="info-title">相关文章</div>
</div>
<div class="info-content">
<div id="info-content" class="info-content">
{{# info}}
{{> ps/info_item}}
{{/ info}}
... ...