代碼實(shí)例ajax實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片
本文給大家介紹ajax如何實(shí)現(xiàn)點(diǎn)擊加載更多數(shù)據(jù)圖片(預(yù)加載)效果的,有一定的參考價(jià)值,有需要的朋友可以參考一下,希望對(duì)你們有所幫助。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax點(diǎn)擊加載更多數(shù)據(jù)--博客園--勇淘未來(lái)</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">沒(méi)有更多了</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>
本地測(cè)試dataNews.json文件:
[ { "img":"img/sina.jpg","title":"百度音樂(lè)1" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)2" } , { "img":"img/sina.jpg","title":"百度音樂(lè)3" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)4" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)5" } , { "img":"img/sina.jpg","title":"百度音樂(lè)6" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)7" } , { "img":"img/sina.jpg","title":"百度音樂(lè)8" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)9" } , { "img":"img/sina.jpg","title":"百度音樂(lè)10" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)11" } , { "img":"img/sina.jpg","title":"百度音樂(lè)12" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)13" } , { "img":"img/sina.jpg","title":"百度音樂(lè)14" } , { "img":"img/tengxu.jpg","title":"百度音樂(lè)15" } ]
點(diǎn)擊更多圖片,加載2條數(shù)據(jù),當(dāng)數(shù)據(jù)加載完了,就顯示 “沒(méi)有更多了”
相關(guān)文章
JavaScript的9個(gè)陷阱及評(píng)點(diǎn)分析
以下是JavaScript容易犯錯(cuò)的九個(gè)陷阱。雖然不是什么很高深的技術(shù)問(wèn)題,但注意一下,會(huì)使您的編程輕松些,即所謂make life easier. 筆者對(duì)某些陷阱會(huì)混雜一些評(píng)點(diǎn)。2008-05-05$.browser.msie 為空或不是對(duì)象問(wèn)題的多種解決方法
因?yàn)槭褂昧薺query判斷ie,所以使用了$.browser.msie但是在jquery 1.9以后的版本中不再支持$.browser而使用$.browser來(lái)替代2017-03-03JavaScript實(shí)現(xiàn)六種網(wǎng)頁(yè)圖片輪播效果詳解
在網(wǎng)頁(yè)中,我們經(jīng)常會(huì)看到各種輪播圖的效果,它們到底是怎樣實(shí)現(xiàn)的呢?本文將為大家詳細(xì)介紹一下六種不同的輪播效果的實(shí)現(xiàn),需要的可以參考一下2021-12-12Javascript Function對(duì)象擴(kuò)展之延時(shí)執(zhí)行函數(shù)
這篇文章主要介紹 在js里面怎么延時(shí)執(zhí)行一個(gè)函數(shù)?2010-07-07BootStrap Table后臺(tái)分頁(yè)時(shí)前臺(tái)刪除最后一頁(yè)所有數(shù)據(jù)refresh刷新后無(wú)數(shù)據(jù)問(wèn)題
這篇文章主要介紹了BootStrap Table后臺(tái)分頁(yè)時(shí)前臺(tái)刪除最后一頁(yè)所有數(shù)據(jù)refresh刷新后無(wú)數(shù)據(jù)問(wèn)題,需要的朋友可以參考下2016-12-12打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)
下面小編就為大家?guī)?lái)一篇打字效果動(dòng)畫(huà)的4種實(shí)現(xiàn)方法(超簡(jiǎn)單)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10JS實(shí)現(xiàn)判斷兩個(gè)日期不能跨年和跨月
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript語(yǔ)言實(shí)現(xiàn)判斷兩個(gè)日期不能跨年和跨月,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2023-04-04JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)精美個(gè)性導(dǎo)航欄筋斗云效果,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10