一個叫LazyLoad的jQuery插件
官網：
http://www.appelsiini.net/projects/lazyload
非壓縮源碼(1.8.5)2013-8-11 20:20:42：
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
壓縮版本(1.8.5)2013-8-11 20:20:42：
https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js
插件運行demo示例，滾動可見觸發圖片加載(帶漸入動畫效果)
http://www.appelsiini.net/projects/lazyload/enabled_fadein.html
帶容器的demo，也就是不是window對象的滾動條，而是一個div對象內滾動可見觸發圖片加載
http://www.appelsiini.net/projects/lazyload/enabled_container.html
延遲加載，也就是實現比如等待5秒後，再加載圖片的用法
http://www.appelsiini.net/projects/lazyload/enabled_timeout.html
如果瀏覽器禁用javascript，則可以通過noscript標籤進行兼容處理
http://www.appelsiini.net/projects/lazyload/enabled_noscript.html
通過ajax來加載圖片
http://www.appelsiini.net/projects/lazyload/enabled_ajax.html
加載及大量的圖片優化(也就是在一個特定的事件(scrollstop)下才進行加載)，原理是，用戶在拖動滾輪的時候可能是爲了"快進"，爲了達到某一個特殊的位置的過渡過程當中，鼠標滾輪一般是不會停下來的(一直按住鼠標左鍵的狀態下)，當停下來後，scrollstop時間會被自動觸發(鼠標左鍵現在仍然在按下的狀態當中)，這樣就可以更細節地優化圖片的加載數量，讓不希望加載的圖片直接被跳過。應驗了一句話：“根據位置來小氣地決定是否加載”
http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html
Special scroll events for jQuery
http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
下面貼一段自己寫的demo代碼：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>圖片延遲加載demo by sonikk</title>
<meta name="generator" content="sonikk demo" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<style type="text/css">
.d1
{
width:400px;
height:400px;
border:1px solid gray;
overflow:hidden;
}
</style>
<script src="jquery.min.js?v=1.9.1" charset="utf-8"></script>
<script src="jquery.lazyload.js?v=1.8.5" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
// http://www.appelsiini.net/projects/lazyload
$(function() {
//event: "click",
// 配合timer進行定時加載
// event: "sporty",
// 提前多少像素(px)加載
// threshold : 200,
$("img.lazy").lazyload({
effect : "fadeIn"
/*
appear : function(elements_left, settings) {
console.log("appear");
console.log(elements_left);
//console.log(this, elements_left, settings);
},
load : function(elements_left, settings) {
console.log("load");
console.log(elements_left);
//console.log(this, elements_left, settings);
}
*/
});
});
/*
$(window).bind("load", function() {
var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
});
*/
</script>
</head>
<body>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://www.baidu.com" οnerrοr="this.src='http://cdn-img.easyicon.net/png/5332/533283.png';" alt="pic1">
</div>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://e.hiphotos.baidu.com/pic/w%3D230/sign=9512c07838dbb6fd255be2253925aba6/b8014a90f603738d6dbf78a1b21bb051f919ecb8.jpg" alt="pic2">
</div>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://g.hiphotos.baidu.com/album/w%3D2048/sign=1f7c5f8cb90e7bec23da04e11b16b838/dc54564e9258d10995a3e231d058ccbf6d814df4.jpg" alt="pic3">
</div>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://c.hiphotos.baidu.com/pic/w%3D230/sign=01960ab6a08b87d65042ac1c37092860/91529822720e0cf36540f67c0b46f21fbf09aa86.jpg" alt="pic4">
</div>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://a.hiphotos.baidu.com/pic/w%3D230/sign=3b10ea2c14ce36d3a20484330af23a24/37d12f2eb9389b502f67f6a48435e5dde6116eaf.jpg" alt="pic5">
</div>
<div class ="d1" >
<img class="lazy" src="grey.jpg" data-original="http://b.hiphotos.baidu.com/pic/w%3D230/sign=8f20ef2a3c6d55fbc5c671255d234f40/3b87e950352ac65cb98fe587faf2b21192138ab8.jpg" alt="pic6">
</div>
</body>
</html>lazyload在jQuery上擴展了一個方法叫
function lazyload(options)
{
}
使用方法是：
$("img.lazy").lazyload( { effect : "fadeIn" } );
lazyload對象的結構如下所示：
lazyload
{
var elements = this;
var $container; // 該值如果設置了settings.container就是settings.container 否則是$(window)
var settings;
}
而var settings又包括
{
threshold 提前偏移量
failure_limit 失敗限制
event 由哪個事件觸發加載
effect 圖片下載後通過播放什麼動畫來展現圖像
container 綁定事件的容器
data_attribute存放要加載圖像url的自定義屬性
skip_invisible是否跳過不可見
appear 當對象出現時 可選註冊監聽函數 (默認null)
load 當對象加載完成事情 可選註冊監聽函數 (默認null)
}
把options的鍵值對追加到settings成員變量當中
默認是scroll事件會觸發appear
如果settings.event當中的事件名稱不爲"scroll"，則會重新綁定一個事件，並在事件內調用appear函數，執行加載
因此要查看圖片是怎麼加載的實現方法，就應該順藤摸瓜來到appear函數內探個究竟。
關鍵方法是：
$container.scrollTop();
這個可以獲取已經滾掉的高度，也就是在顯示容器以上未顯示的那部分高度。
appear事件的檢驗條件：
下面的方法判斷東西在邊界線下方，在下方或剛好相等返回true，否則返回false
$.belowthefold = function(element, settings) {
var fold;
if (settings.container === undefined || settings.container === window) {
fold = $window.height() + $window.scrollTop();
} else {
fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};默認觸發appear的方式是：同時判斷belowthefold和rightoffold爲false的的時候觸發appear
邊界線：從可見到不可見的分割線
fold就是表示在總體容器中滾動條方向邊界線的偏移座標
而如果是$window對象，則滾動條最下面的水平線的高度爲：$window.height() + $window.scrollTop()
如果是非$window容器，計算方式則是$(container).height() + $(container).offset().top
類似方法有多個，可以達到定製不同滾動條的效果，非常方便配置