看來 lazyload.js 不能真正的實現(xiàn)數(shù)據(jù)動態(tài)加載了，只是一個樣子，其實我們實現(xiàn)動態(tài)加載不過是為了減輕服務(wù)器的壓力而已，lazyload.js 顯示是個花架子，如何實現(xiàn)真正的動態(tài)加載，需要對lazyload.js做改裝。
?
我認(rèn)為，動態(tài)加載本質(zhì)上都是一樣的，即： 圖片或者數(shù)據(jù)一開始不會被加載，當(dāng)你觸發(fā)了滾動條（說明你想繼續(xù)看這個網(wǎng)站）那么圖片或者數(shù)據(jù)開始加載。 那么實現(xiàn)的方法其實有很多，但是基本上都是通過替換的方式來實現(xiàn)的。
?
1. 土豆：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
能看的見到圖片：
<img src="http://at-img4.tdimg.com/board/2010/5/tylc-115X55.jpg"/>
<div id="lazyBox" style="margin-top:100px;">
一開始看不到的圖片：
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/720/095/p.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DAA"/>
<img width="120" height="90" style="border:1px solid blue;" class="lazyImg" alt="http://i01.img.tudou.com/data/imgs/i/051/871/396/m20.jpg" src="http://css.tudouui.com/skin/__g/img/sprite.gif" coords="_DBA"/>
</div>
<div style="height:1000px;">
</div>
<script type="text/javascript">
var hasShow = false;
$(window).bind("scroll",function(){
if(hasShow==true){
$(window).unbind("scroll");
return;
}
var t = $(document).scrollTop();
if(t>100){
// 滾動高度超過100時，加載圖片
hasShow = true;
$("#lazyBox .lazyImg").each(function(){
$(this).attr("src",$(this).attr("alt"));
});
}
});
</script>
?
2. 微博 ajax提取數(shù)據(jù)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>圖片動態(tài)加載示例</title>
<style type="text/css">
img{border:0;}
a{cursor:pointer;color:#014ccc;text-decoration:underline;}
a:hover{text-decoration:none;}
.clear{clear:both;height:0px;overflow:hidden;}
.img_list{margin:0 auto;}
.img_list li{list-style:none}
.img_list .items{width:300px;margin:0 auto;}
.img_list .item{float:left;margin-bottom:5px;font-size:14px;}
.img_list .item .order{display:inline-block;*display:inline;*zoom:1;width:28px;color:#f30;}
.img_list .item .i_thumb{width:300px;height:280px;}
.img_list .item .i_title{width:100%;height:20px;}
.showmore{height:35px;background:#f8f8f8;border-bottom:1px solid #cccccc;cursor:pointer;tetx-align:center;margin-bottom:25px;}
.showmore .handle{display:block;height:35px;text-align:center;color:#909090;font-size:14px;text-decoration:none;line-height:35px;}
.showmore .handle:hover{text-decoration:none;background:#e6e6e6;}
</style>
<script type="text/javascript" src="images_test/jquery-1.4.4.min.js"></script>
</head>
<body>
<center><h1>圖片動態(tài)加載示例</h1></center>
<div class="img_list" id="img_list">
<div class="items" id="items">
<ul class="item">
<li class="i_thumb"><a target="_blank" ><img src="images_test/1.jpg" /></a></li>
<li class="i_title"><span class="order">1</span><a target="_blank" >圖片</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a target="_blank" ><img src="images_test/2.jpg" /></a></li>
<li class="i_title"><span class="order">2</span><a target="_blank" >圖片</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a target="_blank" ><img src="images_test/3.jpg" /></a></li>
<li class="i_title"><span class="order">3</span><a target="_blank" >圖片</a></li>
</ul>
<ul class="item">
<li class="i_thumb"><a target="_blank" ><img src="images_test/4.jpg" /></a></li>
<li class="i_title"><span class="order">4</span><a target="_blank" >圖片</a></li>
</ul>
<div class="clear"></div>
</div>
<div class="showmore" id="showmore" ><a class="handle" href="javascript:show()">顯示更多結(jié)果</a></div>
</div>
<script type="text/javascript">
var iHeight = 0;
var iTop = 0;
var clientHeight = 0;
var iIntervalId = null;
var itemsSize = 0;
var pageNo = 1; // 當(dāng)前頁數(shù)，默認(rèn)設(shè)為第 1 頁
var pageSize = 4; // 每頁顯示的數(shù)量
getPageHeight();
// 添加定時檢測事件，每2秒檢測一次
iIntervalId = setInterval("_onScroll();", 2000);
// 取得當(dāng)前頁面顯示所占用的高度
function getPageHeight() {
if(document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
}
iHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
// 調(diào)用ajax取服務(wù)端數(shù)據(jù)
function show() {
pageNo++;
$.ajax({
url: 'img.php?p='+pageNo+'&r='+Math.random(),
type: 'GET',
dataType: 'text',
timeout: 4000,
beforeSend: showLoadingImg,
error: showFailure,
success: showResponse
});
}
function showLoadingImg() {
$('#showmore').html('<a class="handle" href="javascript:show()"><img src="images_test/loading.gif" height="32px" />顯示更多結(jié)果</a>');
}
function showFailure() {
$('#showmore').html('<font color=red> 獲取查詢數(shù)據(jù)出錯 </font>');
}
// 根據(jù)ajax取出來的json數(shù)據(jù)轉(zhuǎn)換成html
function showResponse(responseData) {
var returnjson = eval("("+responseData+")");
itemsSize = returnjson.items.length;
var nextpagehtml = '';
var pageOffset = (pageNo-1)*pageSize + 1;
for(i=0; i<itemsSize; i++) {
nextpagehtml += '<ul class="item">';
nextpagehtml += '<li class="i_thumb"><a target="_blank" title="'+ returnjson.items[i].name +'"><img src="'+ returnjson.items[i].pic +'" alt="'+ returnjson.items[i].name +'" /></a></li>';
nextpagehtml += '<li class="i_title"><span class="order">'+ (pageOffset + i) +'</span><a target="_blank" title="'+ returnjson.items[i].name +'">'+ returnjson.items[i].name +'</a></li>';
nextpagehtml += '</ul>';
}
nextpagehtml += '<div class="clear"></div>';
$('#items').html($('#items').html() + nextpagehtml);
// 當(dāng)前頁碼數(shù)小于3頁時繼續(xù)顯示更多提示框
if(pageNo < 3) {
$('#showmore').html('<a class="handle" href="javascript:show()">顯示更多結(jié)果</a>');
} else {
clearInterval(iIntervalId);
$('#showmore').hide();
}
}
// 判斷滾動條是否到達底部
function reachBottom() {
var scrollTop = 0;
if(document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
if((scrollTop > 0) && (scrollTop + clientHeight == iHeight)) {
return true;
} else {
return false;
}
}
// 檢測事件，檢測滾動條是否接近或到達頁面的底部區(qū)域，0.99是為了更接近底部時
function _onScroll() {
iTop = document.documentElement.scrollTop + document.body.scrollTop;
getPageHeight();
if(((iTop+clientHeight)>parseInt(iHeight*0.99))||reachBottom()) {
if(pageNo >= 3) {
clearInterval(iIntervalId);
$('#showmore').hide();
return;
}
show();
}
};
</script>
</body>
</html>
?
img.php
<?php
if($_GET['p'] == 2)
{
echo '{"items":[{"name":"新加載 圖片 1","pic":"images_test/5.jpg"},{"name":"新加載 圖片 2","pic":"images_test/6.jpg"}, {"name":"新加載 圖片 3","pic":"images_test/7.jpg"}, {"name":"新加載 圖片 4","pic":"images_test/8.jpg"}]}';
}
elseif($_GET['p'] == 3)
{
echo '{"items":[{"name":"新加載 圖片 5","pic":"images_test/9.jpg"},{"name":"新加載 圖片 6","pic":"images_test/10.jpg"}, {"name":"新加載 圖片 7","pic":"images_test/11.jpg"}, {"name":"新加載 圖片 8","pic":"images_test/12.jpg"}]}';
}
?>
?
3. 淘寶產(chǎn)品介紹 支持垂直、水平或同時兩個方向的延遲。
兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
演示： http://www.cnblogs.com/cloudgamer/archive/2010/03/03/ImagesLazyLoad.html
下載： http://dl.iteye.com/topics/download/a9fe3611-6ce9-3013-a425-32c107d04451
?
4. 滾動顯屏加載
demo 您可以狠狠地點擊這里： jQuery滾動加載圖片等demo
轉(zhuǎn)：http://www.zhangxinxu.com/wordpress/?p=1259
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>
<script> $(function() { $(".scrollLoading").scrollLoading();}); </script>
?
表示所有class為scrollLoading的元素綁定了滾動加載的方法。
當(dāng)然，不可能真的就如此簡單，我們還需要做點小動作的。元素默認(rèn)是不加載的，那么真正的加載地址顯然要預(yù)先在元素上放置的，例如新浪微博默認(rèn)把頭像地址綁在了一個自定義的”dynamic-src”屬性上，見下圖：
在HTML5中，以data-開頭的自定義屬性都是合法的，且地址可以是圖片，頁面等。所以，我設(shè)定了綁定地址的自定義屬性為”data-url”，此屬性值設(shè)為真實的圖片（或頁面）地址就可以了。例如下面：
<div class="scrollLoading" data-url="loaded.html">加載中...</div>
會在滾動時加載名為loaded.html的頁面，并自動替換里面的內(nèi)容。
對于常用的圖片，還有一點小問題，就是其默認(rèn)的src圖片地址。其src地址不能是真實的圖片地址（否則會直接一次性全部加載），也不能是空地址或是壞地址，否則IE瀏覽器下會出現(xiàn)很驚悚的紅叉叉。
。我的做法是默認(rèn)鏈接的是一個1px * 1px的gif透明圖片（大小很小），同時可以透出后面加載中g(shù)if動畫圖片，當(dāng)滾動加載的時候直接把此gif圖片替換掉。于是，對于圖片，可能就有類似下面的代碼：
<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />
scrollLoading是個很簡單很小的插件（無注釋YUI compressor min版僅508B），所以參數(shù)也很少，就一個，見下表：
?
參數(shù) 默認(rèn) 釋義| attr | data-url | 獲取元素加載地址的屬性名 |
就這些了。此插件只適用于頁面默認(rèn)滾動條的動態(tài)加載。對于內(nèi)部div之類的滾動加載不支持。
?
5. KISSY 庫
主頁： http://docs.kissyui.com/
淘寶
附件
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
