您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)ajax如何實現(xiàn)點擊加載更多數(shù)據(jù)圖片,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
代碼如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax點擊加載更多數(shù)據(jù)--博客園--勇淘未來</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條數(shù)據(jù),當(dāng)數(shù)據(jù)加載完了,就顯示 “沒有更多了”
ajax是一種在無需重新加載整個網(wǎng)頁的情況下,能夠更新部分網(wǎng)頁的技術(shù),可以通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換,使網(wǎng)頁實現(xiàn)異步更新。
關(guān)于“ajax如何實現(xiàn)點擊加載更多數(shù)據(jù)圖片”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。