做web開發的朋友都應該掌握前端優化這個技巧
其中一個就是滾動延時加載
這個技巧應用在了很多地方
比如新浪微博網頁版
以下就為大家詳細介紹
需要的朋友可以參考下
為什麼要延時加載呢？頁面加載的時候就顯示全部的圖片不就得了？有必要多此一舉嗎？答案是肯定的當要加載的圖片或者內容很多時如果一次性加載完 畢那麼整個頁面將會加載很久意味著要用戶等待很久這是對用戶不友好的或許你還會問那不就做個分頁不就得了？其實這種滾動延時加載的技巧正是用來 代替手動點擊下一頁的分頁技術每換一頁都要用戶點擊一次這也是對用戶不友好的所以才有了滾動延時加載
我這裡把加載圖片作為例子就好像百度圖片裡的一樣你往下滾動它就會繼續顯示下一頁的圖片
要求是這樣的比如我要加載張圖片在頁面加載完畢後我先加載張（前提是張已經占滿浏覽器窗口高度）當滾動條滾動到浏覽器底部的時候再加載張一共加載次
原理是這樣的先獲取當前浏覽器的窗口高度a然後給頁面綁定一個滾動條滾動事件當滾動條滾動的時候首先判斷時候已經加載了張如果小於張再獲取當前文檔距離頂部的高度b以及圖片內容的高度c如果a+b>=c繼續加載張圖片
我說過我喜歡以盡可能少的代碼以及盡可能簡單的demo來為有需要的人展示一些強大的功能因為所有的東西原理其實都很簡單越簡單的demo越容易讓人理解和接受所以代碼很少直接上代碼
復制代碼 代碼如下:
<!DOCTYPE html>
<html xmlns="
<head>
<meta http
equiv="Content
Type" content="text/html; charset=utf
" />
<title>頁面滾動延遲加載圖片</title>
<style type="text/css">
body {
margin:
px;
}
ul {
list
style: none;
margin:
px;
padding:
px;
}
</style>
<script type="text/javascript" src="jquery
min
js"></script>
<script type="text/javascript">
var n =
;
var winHeight = $(window)
height();
$(function () {
loadimg();
$(window)
scroll(function () {
if (n <
) {
var docTop = $(document)
scrollTop();
var contentHeight = $("#content")
height();
if (docTop + winHeight >= contentHeight
) {
loadimg();
}
}
});
});
function loadimg() {
for (i =
; i <
; i++) {
$("#content")
append("<li><img src=
jpg
/></li>");
}
n +=
;
}
</script>
</head>
<body>
<ul id="content">
</ul>
</body>
</html>
這 裡使用了jqury框架是為了讓代碼更少更簡單如果你可以手寫純js代碼來實現這個功能當然最好不過畢竟是優化這個小小的功能也不需要使用到任何 js框架不過個人比較喜歡jquery框架畢竟在大項目中手寫純js代碼將會嚴重拖慢整個項目的進度有一個強大的js框架擺在面前合理運用還是 能提高開發效率的而且在一個大項目中jquery不是僅僅能幫你實現這個小小的功能而已像Ajax它是能輕輕松松就能幫你搞定的另外我這裡只是 寫死了加載這一張圖片事實上它應該是使用Ajax來請求新的圖片然後加載到頁面裡的因為想盡量簡單就沒有涉及後台邏輯所以只加載這一張圖片
你可能會注意到這句代碼docTop + winHeight >= contentHeight 這裡我為什麼要呢？如果不在IEFirefox下測試時通過的但是在Chrome下就不行了因為在Chrome下docTop + winHeight是永遠比contentHeight小的而在前兩個浏覽器裡docTop + winHeight是比contentHeight大的這個是浏覽器的問題我們只能去兼容它們最簡單的方法就是不一定要滾動到底部滾動到距離底 部還有個像素的時候就可以加載新的圖片了
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20174.html
