相信很多人都看過瀑布流圖片佈局,那些圖片是動態載入出來的,效果很好,對伺服器的壓力相對來說也小了很多,用滑鼠操作的時候相信都看過這樣的效果:進入qq空間,向下拉動空間,到底部時,會動態載入剩餘的說說或是日誌,今天我們就來看看他們的實作思維和js控制動態載入的程式碼。
下面的程式碼主要是控制捲軸下拉時的載入事件的,無論是載入圖片還是載入記錄資料 都可以。
載入jQuery函式庫後我們可以這樣使用:
$(window).scroll(function () { var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if (scrollTop + windowHeight == scrollHeight) { //此处是滚动条到底部时候触发的事件,在这里写要加载的数据,或者是拉动滚动条的操作 //var page = Number($("#redgiftNextPage").attr('currentpage')) + 1; //redgiftList(page); //$("#redgiftNextPage").attr('currentpage', page + 1); } });
解析:
判斷捲軸到底部,需要用到DOM的三個屬性值,即scrollTop、clientHeight、scrollHeight。
從這個三個屬性的介紹就可以看出來,滾動條到底部的條件即為scrollTop clientHeight == scrollHeight。
純js我們可以這樣做:
window.onscroll = function() { var scrollTop = document.body.scrollTop; var offsetHeight = document.body.offsetHeight; var scrollHeight = document.body.scrollHeight; if (scrollTop == scrollHeight - offsetHeight) { page++; loadList(page); } }; function loadList(page) { page = page || 1; if (isLoad) { getJSON('/forum.php?mod=hot&page=' + page).then(function(data) { if (data.code == 200) { data = data.data; if (data && Object.keys(data).length > 0) { for (var k in data) { var v = data[k]; detailTemplate = detailTemplate.cloneNode(true); var userInfoObj = detailTemplate.getElementsByClassName('user-info')[0]; userInfoObj.getElementsByClassName('name')[0].innerText = v.author; userInfoObj.getElementsByClassName('avatar')[0].src = v.avatar; userInfoObj.getElementsByClassName('post-time')[0].innerHTML = v.lastpost; detailTemplate.getElementsByClassName('title')[0].innerText = v.subject; detailTemplate.getElementsByClassName('desc')[0].innerText = v.subject; var extInfoObj = detailTemplate.getElementsByClassName('ext-info')[0]; extInfoObj.getElementsByClassName('from')[0].innerText = v.fname; extInfoObj.getElementsByClassName('view-time')[0].innerText = v.views; postListObj.appendChild(detailTemplate); } } else { isLoad = false; } } else { isLoad = false; } }, function(status) { console.log('Something went wrong, status is ' + status); }); } }