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

訾晋

2023-12-01

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文件中增删改查数据。

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

相关阅读

相关文章

相关问答

相关文档