ホームページ >ウェブフロントエンド >jsチュートリアル >Ajax は、クリックしてさらに多くのデータ画像をロードできるようにします (プリロード)
Ajax は、クリックしてさらに多くのデータ画像をロードできるようにします (プリロード)
- 青灯夜游転載
- 2018-10-11 17:59:323088ブラウズ
この記事では、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" style="text-align: center;margin-top:50px;">
<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>ローカル テスト データNews.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 は、クリックしてさらに多くのデータ画像をロードできるようにします (プリロード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcnblogs.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。