淘寶,QQ,還有噹噹，亞馬遜之類網之類的都有這個效果，原理是分段載入圖片，主要用於大型網站節省頻寬，可是他們提供的東西壓縮混淆看不清，還有的要基於什麼雅虎的什麼庫，總之是很麻煩的，JQ的控制項倒是夠清晰了，只是還是沒有達到節省網路頻寬的效果，於是我在JQ懶載入控制項上進行一些改進，改進以後的最大的特點就是調用方便，項目中不需要什麼太多更改，而且JS檔案也不大。（泡泡網工！轉載註明出處，謝謝）
1.給泡泡網開發控制項，本來想直接用JQ的延遲控制項，但是JQ的延遲控制項只是加快了載入速度，沒有省頻寬，也就是說JQ的懶載入並沒有實際增益圖片的傳輸量，本人講不明白，還是請各位把代碼DOWN了以後驗收
{http://www.appelsiini.net/projects/lazyload 這個是原JQ控制項的下載地址}
2.本控制項用法要注意。
1.引用JQ：
複製代碼 代碼如下:
<script src="js/jquery.js" type="text/javascript"></script>
JQ沒有就去網上DOWN
2.把下面貼的代碼儲存為JS檔案
複製代碼 代碼如下:
<script src="js/MinmyLazyload.js" type="text/javascript"></script>
添加引用
3.調用語句，和JQ一摸一樣，也可以而這樣調用,記得是在頁面底部，</BODY>標籤之前調用
複製代碼 代碼如下:
<script type="text/javascript">$("img").lazyload(); </script>
或者這樣調用
複製代碼 代碼如下:
<script type="text/javascript">$("img").lazyload({ placeholder: "images/blue-loading.gif", effect:"fadeIn" });
</script>
當然你得先有一張blue-loading.gif的圖片，然後得在images檔案夾下面才可以這樣調用，
effect後面設定顯示效果，預設是SHOW的效果，
4.前台的IMG標籤裡不要放SRC，請放入original標籤。比如 ，
這樣就不會在頁面一開啟的時候載入圖片了，也是最關鍵的地方，或者說是項目的後台代碼裡面唯一需要改動的地方。
有代碼有真相
代碼
複製代碼 代碼如下:
(function($) {
$.fn.lazyload = function(options) {
var settings = {
threshold: 0,
failurelimit: 0,
event: "scroll",
effect: "show",//預設效果為show
container: window
};
if (options) {
$.extend(settings, options);
}
var elements = this;
if ("scroll" == settings.event) {
$(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if ($.abovethetop(this, settings) ||
$.leftofbegin(this, settings)
) {
self.loaded = false;
}
else if (!$.belowthefold(this, settings) &&
!$.rightoffold(this, settings)) {
self.loaded = false;
$(this).trigger("appear");
}
else {
self.loaded = true;
if (counter++ > settings.failurelimit) {
return false;
}
}
});
var temp = $.grep(elements, function(element) {
return !element.loaded;
});
elements = $(temp);
});
}
/**三超控制項--作品**/
this.each(function() {
var self = this;
if (settings.placeholder) {
$(self).attr("src", settings.placeholder);
}
$(self).one("appear", function() {
if (!this.loaded) {
$("<img />")
.bind("load", function() {
$(self)
.hide()
.attr("src", $(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", $(self).attr("original"));
};
});
if ("scroll" != settings.event) {
$(self).bind(settings.event, function(event) {
if (!self.loaded) {
$(self).trigger("appear");
}
});
}
});
$(settings.container).trigger(settings.event);
return this;
};
$.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).height() + $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
return fold <= $(element).offset().top - settings.threshold;
};
$.rightoffold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).width() + $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
return fold <= $(element).offset().left - settings.threshold;
};
$.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
return fold >= $(element).offset().top + settings.threshold + $(element).height();
};
$.leftofbegin = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = $(window).scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
return fold >= $(element).offset().left + settings.threshold + $(element).width();
};
$.extend($.expr[':'], {
"below-the-fold": "$.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold": "!$.belowthefold(a, {threshold : 0, container: window})",
"right-of-fold": "$.rightoffold(a, {threshold : 0, container: window})",
"left-of-fold": "!$.rightoffold(a, {threshold : 0, container: window})"
});
})(jQuery);
/**
貌似很難讓人理解我在哪裡最佳化了
先寫清楚JQ地懶載入原理：
假設有10000張圖片要在頁面上顯示，JQ的先一次性傳送1W張圖片到用戶端，然後頁面快速載入10張，
省下來了9990張圖片的載入時間
我的控制項原理：
先一次性傳送10張圖片到用戶端，載入10張，
省下來了9990張圖片的載入時間，
以及9990張圖片的傳送時間，這時候節省的網路流量是巨大的，
對大型網站來說，這些節省出的頻寬可以乾的事情就海了去了
也就是說我的控制項第一次只是載入了1W個值為空白的IMG標籤，也就是一點點的字串而已！
（IMG 標籤裡面的original屬性不經過處理是不可能將伺服器的圖片下載到用戶端上面去的！
但是如果用SRC標籤圖片絕對第一次就全部載入過去了，這個時候也就只能在頁面載入速度上下功夫了）
不相信的可以用Firefox瀏覽器查看圖片請求，JQ控制項絕對是一次傳送完畢！）
順便說一下我的測試JQ的方法
http://www.appelsiini.net/projects/lazyload/enabled.html 這個是JQ控制項的測試地址，用Firefox開啟，開啟firebug，然後監視圖片的傳輸量，情況是一開啟就把6張圖片全部載入完畢，再拖動捲軸的時候，只是簡單的執行載入功能，還是上圖：
出處http://www.cnblogs.com/jacd/archive/2010/03/25/1696085.html
