溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關ajax如何實現點擊加載更多數據圖片，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax點擊加載更多數據--博客園--勇淘未來</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
*{padding:0;margin:0;}
.box {margin: 100px auto;width: 550px;}
ul li {width:550px;list-style: none;}
ul li span{text-align:center;display:block;}
.clear {clear: both;}
.load {text-align: center;display: none;margin-top:50px;color:#ccc;}
.end{display:none;color:#ccc;}
</style>
</head>
<body>
<div class="box">
<ul></ul>
<div class="clear"></div>
<div class="load">加載中...</div>
<div class="more" >
<button class="btn">查看更多圖片</button>
<div class="end">沒有更多了</div>
</div>
</div>
<script>
var num = 0;
var start = 0;
var size = 2;
$.ajax({
url: "dataNews.json",
type: "get",
success: function(res){
var str = "";
for(var i = 0;i < 2;i++){
str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";
}
$(".box ul").append(str);
},
error:function(){
console.log(errors);
}
})
$(".btn").click(function(){
$(".load").show();
setTimeout(function(){
$(".load").hide();
num++;
console.log(num);
start = num * size;
$.ajax({
url:"dataNews.json",
type:"get",
success:function(res){
var sum = res.length;
if(start + size > sum) {
size = sum - start;
$(".btn").css("display","none");
$(".end").css("display","block");
}
var str = "";
for(var i = start;i<(start + size);i++) {
str += "<li><img src=" + res[i].img + "><span>"+ res[i].title +"</span></li>";
}
console.log(start + size);
$("ul").append(str);
}
});
},300)
}
)
</script>
</body>
</html>本地測試dataNews.json文件:
[ {
"img":"img/sina.jpg","title":"百度音樂1"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂2"
}
, {
"img":"img/sina.jpg","title":"百度音樂3"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂4"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂5"
}
, {
"img":"img/sina.jpg","title":"百度音樂6"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂7"
}
, {
"img":"img/sina.jpg","title":"百度音樂8"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂9"
}
, {
"img":"img/sina.jpg","title":"百度音樂10"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂11"
}
, {
"img":"img/sina.jpg","title":"百度音樂12"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂13"
}
, {
"img":"img/sina.jpg","title":"百度音樂14"
}
, {
"img":"img/tengxu.jpg","title":"百度音樂15"
}
]點擊更多圖片，加載2條數據，當數據加載完了，就顯示 “沒有更多了”
ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，可以通過在后臺與服務器進行少量數據交換，使網頁實現異步更新。
關于“ajax如何實現點擊加載更多數據圖片”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
