onepage_mrhi/tm/template_dir/list.html

<{include file="header.html"}>
<link rel="stylesheet" type="text/css" href="<{$web_cfg.cdn}>/haili/css/index.css" />
<style>
.vogue_top_list img {
    background: #fff url("<{$web_cfg.cdn}>/public/static/img/m-load.gif") no-repeat scroll 50% center / 20px 20px;
}
</style>
<{include file="common_header.html"}>

<{if $eventsData}>
<section class="cardlist">
    <{foreach from=$eventsData item=events}>
    <dl>
        <dt><a href="<{$events.url}>"><img src="<{$web_cfg.cdn}>/public/static/img/bg_alpha.png" data-ks-lazyload="<{$events.img_url}>"></a></dt>
        <dd><h5><{$events.events_name}></h5></dd>
        <dd>

        <{if $events.rday>=1}>
        <span class="time">
        <em class="icon-time"></em>剩余<{$events.rday}>天</span>
        <{else}>
        已结束
        <{/if}>
        <span>参与<{$events.user_total}>人</span>

        </dd>
    </dl>
    <{/foreach}>
</section>
<{/if}>

<div class="clear"></div>
<{if $totals}>
<div class="loading">
    <img
        id="loadPage"
        data-ks-lazyload="<{$web_cfg.cdn}>/public/static/img/loading_new.gif"
        data-request-url="<{$web_cfg.domain}>/?c=cate&a=ajax&cate=<{$cate}>&plat_form_id=<{$plat_form_id}>&url=<{$url}>"
        data-page="2"
        data-totals="<{$totals}>"
        style="width:0px;"
    />
    <div class="loader-inner ball-pulse">
        <div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
</div>
<{/if}>


<script>

KISSY.use('node, io, gallery/datalazyload/2.0/index', function (S, Node, IO, Datalazyload) {
	var $ = S.all;
	var lock = false;
	
	new Datalazyload({
		load: function(el){
			if (lock) return false;
			lock = true;
			
			var requesrUrl = $(el).attr('data-request-url');
			var page = Number($(el).attr('data-page'));
			var totals = Number($(el).attr('data-totals'));
			if (!requesrUrl) {
				lock = false;
				return false;
			}
			
			if (page > totals) {
				$('.loading').hide();
				return false;
			}
			
			IO.get(
				requesrUrl
				, {page: page}
				, function (data) {
					if (data.ok) {
						var next_page = page + 1;
						$('#loadPage').attr('data-page', next_page);
						var new_dl = $(data.msg);
						$(".cardlist").append(new_dl);
						new Datalazyload();
						lock = false;
						
						if (next_page > totals) {
							$('.loading').hide();
						}
					}
				}
				, 'json'
			);
		}
	});
});


//判断当前页图片加载完成loading消失
/* $(".vogue_top_list").find("img").load(function(){
	$(this).parent().css("background","none");
}); */

</script>
<{include file="bottom.html"}>

<script type="text/javascript" src="<{$web_cfg.cdn}>/haili/js/list.js"></script>