ajax实现点击加载更多数据图片（预加载）
本文给大家介绍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>本地测试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视频教程！
Atas ialah kandungan terperinci ajax实现点击加载更多数据图片（预加载）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1359
52
Bagaimana untuk menyelesaikan ralat 403 yang dihadapi oleh permintaan jQuery AJAX
Feb 20, 2024 am 10:07 AM
Tajuk: Kaedah dan contoh kod untuk menyelesaikan ralat 403 dalam permintaan AJAX jQuery Ralat 403 merujuk kepada permintaan bahawa pelayan melarang akses kepada sumber Ralat ini biasanya berlaku kerana permintaan itu tidak mempunyai kebenaran atau ditolak oleh pelayan. Apabila membuat permintaan jQueryAJAX, anda kadangkala menghadapi situasi ini Artikel ini akan memperkenalkan cara menyelesaikan masalah ini dan memberikan contoh kod. Penyelesaian: Semak kebenaran: Mula-mula pastikan alamat URL yang diminta adalah betul dan sahkan bahawa anda mempunyai kebenaran yang mencukupi untuk mengakses sumber tersebut.
Bagaimana untuk menyelesaikan ralat permintaan jQuery AJAX 403
Feb 19, 2024 pm 05:55 PM
jQuery ialah perpustakaan JavaScript popular yang digunakan untuk memudahkan pembangunan sisi klien. AJAX ialah teknologi yang menghantar permintaan tak segerak dan berinteraksi dengan pelayan tanpa memuatkan semula keseluruhan halaman web. Walau bagaimanapun, apabila menggunakan jQuery untuk membuat permintaan AJAX, anda kadangkala menghadapi 403 ralat. Ralat 403 biasanya ralat akses yang dinafikan pelayan, mungkin disebabkan oleh dasar keselamatan atau isu kebenaran. Dalam artikel ini, kami akan membincangkan cara menyelesaikan permintaan jQueryAJAX yang menghadapi ralat 403
Bagaimana untuk mendapatkan pembolehubah daripada kaedah PHP menggunakan Ajax?
Mar 09, 2024 pm 05:36 PM
Menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP adalah senario biasa dalam pembangunan web Melalui Ajax, halaman boleh diperoleh secara dinamik tanpa menyegarkan data. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Ajax untuk mendapatkan pembolehubah daripada kaedah PHP, dan memberikan contoh kod khusus. Pertama, kita perlu menulis fail PHP untuk mengendalikan permintaan Ajax dan mengembalikan pembolehubah yang diperlukan. Berikut ialah kod contoh untuk fail PHP mudah getData.php:
Bagaimana untuk menyelesaikan masalah jQuery AJAX ralat 403?
Feb 23, 2024 pm 04:27 PM
Bagaimana untuk menyelesaikan masalah jQueryAJAX ralat 403? Apabila membangunkan aplikasi web, jQuery sering digunakan untuk menghantar permintaan tak segerak. Walau bagaimanapun, kadangkala anda mungkin menghadapi kod ralat 403 apabila menggunakan jQueryAJAX, menunjukkan bahawa akses dilarang oleh pelayan. Ini biasanya disebabkan oleh tetapan keselamatan bahagian pelayan, tetapi terdapat cara untuk mengatasinya. Artikel ini akan memperkenalkan cara menyelesaikan masalah ralat jQueryAJAX 403 dan memberikan contoh kod khusus. 1. membuat
PHP dan Ajax: Membina enjin cadangan autolengkap
Jun 02, 2024 pm 08:39 PM
Bina enjin cadangan autolengkap menggunakan PHP dan Ajax: Skrip sisi pelayan: mengendalikan permintaan Ajax dan mengembalikan cadangan (autocomplete.php). Skrip pelanggan: Hantar permintaan Ajax dan cadangan paparan (autocomplete.js). Kes praktikal: Sertakan skrip dalam halaman HTML dan nyatakan pengecam elemen input carian.
PHP lwn. Ajax: Penyelesaian untuk mencipta kandungan yang dimuatkan secara dinamik
Jun 06, 2024 pm 01:12 PM
Ajax (JavaScript Asynchronous dan XML) membenarkan menambah kandungan dinamik tanpa memuatkan semula halaman. Menggunakan PHP dan Ajax, anda boleh memuatkan senarai produk secara dinamik: HTML mencipta halaman dengan elemen kontena dan permintaan Ajax menambah data pada elemen selepas memuatkannya. JavaScript menggunakan Ajax untuk menghantar permintaan kepada pelayan melalui XMLHttpRequest untuk mendapatkan data produk dalam format JSON daripada pelayan. PHP menggunakan MySQL untuk menanyakan data produk daripada pangkalan data dan mengekodnya ke dalam format JSON. JavaScript menghuraikan data JSON dan memaparkannya dalam bekas halaman. Mengklik butang mencetuskan permintaan Ajax untuk memuatkan senarai produk.
Apakah versi ajax?
Nov 22, 2023 pm 02:00 PM
Ajax bukanlah versi khusus, tetapi teknologi yang menggunakan koleksi teknologi untuk memuatkan dan mengemas kini kandungan halaman web secara tidak segerak. Ajax tidak mempunyai nombor versi tertentu, tetapi terdapat beberapa variasi atau sambungan ajax: 1. jQuery AJAX 2. Axios 4. JSONP 5. XMLHttpRequest 7. Server; -Acara Dihantar; 8, GraphQL, dsb.
Pertukaran data tak segerak menggunakan fungsi Ajax
Jan 26, 2024 am 09:41 AM
Cara menggunakan fungsi Ajax untuk mencapai interaksi data tak segerak Dengan perkembangan teknologi Internet dan Web, interaksi data antara bahagian hadapan dan bahagian belakang telah menjadi sangat penting. Kaedah interaksi data tradisional, seperti penyegaran halaman dan penyerahan borang, tidak lagi dapat memenuhi keperluan pengguna. Ajax (JavaScript Asynchronous dan XML) telah menjadi alat penting untuk interaksi data tak segerak. Ajax membolehkan web menggunakan JavaScript dan objek XMLHttpRequest
