这个是原先点击之后加载更多列表出来,然后现在想做成自动加载出来的。
1,可以原代码改成自动加载吗。
2,还是另外一个,每次下拉到这个按钮位置触发这个按钮,让它加载列表出来。
html:
<div class="moreload">
<div class="pattern">
<volist name="list" id="r">
<li class="">
<a href="{$r.url}">
<span class="picture">
<img src="{$r.thumb}" alt="{$r.title}" class="effect-one-img"></span>
<h5 class="title">{$r.title}</h5>
<div class="part">
<span class="time">{$r.createtime|toDate=###,'Y-m-d'}</span>
<span class="source">{if $r['copyfrom']}{$r.copyfrom}{else}{$site_name}{/if}</span>
<span class="read">阅读({$r.hits})</span></div>
<p class="txt">{$r.description}</p></a>
</li>
</volist>
</div>
<ul class="list news-list slow clearfix">Data loading, please wait...</ul>
<span class="point-more" id="point" name="point"></span>
<div class="more slow">
<a href="javascript:;" class="" onClick="moreload.loadMore();">加载更多</a></div>
</div>
</div>
JS:
<script>
var _content = []; //临时存储li循环内容
var moreload = {
_default: 5, //默认显示图片个数
_loading: 3, //每次点击按钮后加载的个数
init: function() {
var lis = $(".moreload .pattern li");
$(".moreload ul.list").html("");
for (var n = 0; n < moreload._default; n++) {
lis.eq(n).appendTo(".moreload ul.list");
}
$(".moreload ul.list img").each(function() {
$(this).attr('src', $(this).attr('realSrc'));
}) for (var i = moreload._default; i < lis.length; i++) {
_content.push(lis.eq(i));
}
$(".moreload .pattern").html("");
},
loadMore: function() {
var mLis = $(".moreload ul.list li").length;
for (var i = 0; i < moreload._loading; i++) {
var target = _content.shift();
if (!target) {
$('.moreload .more').html("<span>已全部加载完成...</span>");
$('.moreload .more').addClass('end');
break;
}
$(".moreload ul.list").append(target);
$(".moreload ul.list img").eq(mLis + i).each(function() {
$(this).attr('src', $(this).attr('realSrc'));
});
}
}
}
moreload.init();
</script>
init: function() {
原来代码不变
//在原来代码下边加入这个
this.loadMore();
}