php ajax加载更多图片,ajax实现点击加载更多数据图片（预加载）

本文给大家介绍ajax如何实现点击加载更多数据图片(预加载)效果的，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

ajax点击加载更多数据--博客园--勇淘未来

*{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;}

加载中...

查看更多图片

没有更多了

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 += "

"+ res[i].title +"";

}

$(".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

str += "

"+ res[i].title +"";

}

console.log(start + size);

$("ul").append(str);

}

});

},300)

}

)

本地测试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视频教程！