onepage_mrhi/tm/template_dir/index.html

<{include file="header.html"}>
<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"}>

<div class="wrapper clear">    
    <div class="vogue_top_list">
    	<{foreach from=$eventsData item=events}>
        <dl>
        	<a href="<{$events.url}>">
                <dt><img src="<{$web_cfg.cdn}>/public/static/img/bg_alpha.png" data-ks-lazyload="<{$events.img_url}>"></dt>
                <dd>
                	<p><{$events.events_name}></p>
                    <p class="v_time">                    	
                        <{if $events.rday>=1}>
                        <em class="time_icon"></em><span>剩余<{$events.rday}>天</span>
                        <{else}>
                        已结束
                        <{/if}>
                    </p>
                </dd>
            </a>
        </dl>
        <{/foreach}>
    </div>
    
    <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=index&a=ajax&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}>
    <br>
        
</div>


<!--loading 样式1-->
<!--<div class="loading">
    <div class="loader-inner line-spin-fade-loader">
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
</div>-->

<!--loading 样式2-->
<!--<div class="loading">
    <div class="loader-inner ball-pulse">
        <div></div><div></div><div></div><div></div><div></div><div></div>
    </div>
</div>-->


<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);
						$(".vogue_top_list").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"}>