您的位置：首页 > Web前端 > JQuery

jquery.lazyload.min和jquery-jtemplates在Ajax加载页面的应用

2016-03-10 11:15 615 查看 

HTML代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>::去家玩::</title>
<meta name="viewport" content="user-scalable=0, width=device-width,height=device-height,initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
<meta content="telephone=no" name="format-detection" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../css/teBuyList.css" />

<script src="../js/jquery.js"></script>
<script src="../js/jquery.lazyload.min.js"></script>
<script src="../js/jquery-jtemplates.js"></script>
<script>
$(function() {
//set template and process 插入模板
$("#Items").setTemplateElement("Template-Items").processTemplateURL("teBuyListTwo.json");
});
//format SalesPrice   //price小数点后面的数字较小，插入i标签控制大小
function formatSalesPrice(date) {
return date.replace('.','.<i>');
}

//next page load   //加载更多
$(function(){
$(window).scroll(function(){
// 当滚动到最底部以上100像素时， 加载新内容
if ($(document).height() - $(this).scrollTop() - $(this).height()<10){
loadMore();
}
});
});

$(function() {
$("img").lazyload({
placeholder : "../images/preloader.gif",
event : "click"
});
});

function loadMore(){   //ajax异步加载
$.ajax({
type: "post",
contentType: "application/json",
url: "teBuyListTwo.json",
beforeSend: function () {
$(".loading").show();
},
success: function (data) {
$("#Items").append("<div class='more'></div>");
var lastDiv = $(".more:last")//chosse last div has class more
$(lastDiv).setTemplateElement("Template-Items").processTemplateURL("teBuyListTwo.json");
},
complete: function () {
$(".loading").hide();
},
error: function (data) {
console.info("error: " + data.responseText);
}
});
}
$(function() {
$("img.lazy").lazyload({

effect : "fadeIn"
});
});

</script>
</head>
<body>
<!--@header-->
<header class="header" id="header">
<a href="javascript:history.go(-1);" class="back"><em class="icon30" data-icon=""></em></a>
<h2>益智玩具</h2>
<a href="#" class="share"><em class="icon26" data-icon=""></em></a>
</header>
<!-- Templates -->

<p style="display:none">
<textarea id="Template-Items" rows="0" cols="0" >
<!--      //此处是jquery.lazyload.min和jquery-jtemplates的语法，把价格名称都换成变量
{#foreach $T.Items as apple}
<div class="goodsList">
<ul>
<li>
<a href="#"><img class="lazy" src="{$T.apple.Img}" alt=""></a>
<p><a href="#">{$T.apple.Name}</a></p>
<p><span class="red"><i>¥</i>{formatSalesPrice($T.apple.SalesPrice)}</i></span><span class="oldPrice"><i>¥</i>{$T.apple.OldPrice}</span></p>
</li>
<li>
<a href="#"><img class="lazy" src="{$T.apple.Img2}" alt=""></a>
<p><a href="#">{$T.apple.Name2}</a></p>
<p><span class="red"><i>¥</i>{formatSalesPrice($T.apple.SalesPrice)}</i></span><span class="oldPrice"><i>¥</i>{$T.apple.OldPrice}</span></p>
</li>
</ul>
</div>

{#/for}
-->
</textarea>
</p>
<!-- Output elements -->
<div id="Items" class="Content">

</div>

<div class="loading"><img src="../images/preloader.gif" alt="" /></div>

</body>
</html>
Json代码:
{
"Items":[
{
"Img": "../images/tebuy/goods01.jpg",
"Img2": "../images/tebuy/goods02.jpg",
"Name": "变形金刚4 合金版大黄蜂擎天柱汽车人模型孩儿童玩具",
"Name2": "奋铭托马斯小火车套装电动轨道火车儿童玩具汽车赛车",
"SalesPrice": "500.66",
"OldPrice": "600.88"
},
{
"Img": "../images/tebuy/goods01.jpg",
"Img2": "../images/tebuy/goods02.jpg",
"Name": "变形金刚4 合金版大黄蜂擎天柱汽车人模型孩儿童玩具",
"Name2": "奋铭托马斯小火车套装电动轨道火车儿童玩具汽车赛车",
"SalesPrice": "500.66",
"OldPrice": "600.88"
},
{
"Img": "../images/tebuy/goods01.jpg",
"Img2": "../images/tebuy/goods02.jpg",
"Name": "变形金刚4 合金版大黄蜂擎天柱汽车人模型孩儿童玩具",
"Name2": "奋铭托马斯小火车套装电动轨道火车儿童玩具汽车赛车",
"SalesPrice": "500.66",
"OldPrice": "600.88"
},
{
"Img": "../images/tebuy/goods01.jpg",
"Img2": "../images/tebuy/goods02.jpg",
"Name": "变形金刚4 合金版大黄蜂擎天柱汽车人模型孩儿童玩具",
"Name2": "奋铭托马斯小火车套装电动轨道火车儿童玩具汽车赛车",
"SalesPrice": "500.66",
"OldPrice": "600.88"
}
],
"currentPage":1,
"pageSize":4,
"totalPage":2,
"totalSize":8
}
总结：在HTML代码中引入jquery.lazyload.min和jquery-jtemplates模板，运用Ajax异步加载数据，再用jquery.lazyload.min和jquery-jtemplates的语法，把价格名称都换成变量，方便后台直接在Json文件中增删改查数据。





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航