二話不說(shuō)先上代碼：
$(function(){
$(window).scroll( function() {
$("img").each(function(i){
if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){
$(this).attr("src",$(this).attr("value"));
}
});
});
});
當(dāng)滾動(dòng)條條滾動(dòng)到圖片位置再顯示圖片，像淘寶，京東等網(wǎng)站都采用了這樣的js技術(shù)，這樣可以是帶寬使用減少，也可以增加用戶體驗(yàn)。
即:當(dāng)滾動(dòng)條滾動(dòng)時(shí)出發(fā)檢查事件,檢查每一個(gè)圖片位置，當(dāng)圖片距離頁(yè)面頂部位置小于滾動(dòng)條加上瀏覽器高度時(shí)，則圖片進(jìn)行顯示輸出。
解釋一下上面的代碼，本代碼采用jquery弄的，offset().top是獲取圖片距離頂部高度當(dāng)小于滾動(dòng)條滾動(dòng)距離document.documentElement.scrollTop加上瀏覽器高度$(window).height()時(shí)則進(jìn)行顯示，在這里-200是為了看效果，當(dāng)圖片出來(lái)200像素的 時(shí)候才進(jìn)行圖片顯示
////////////////////////////////////////////
網(wǎng)上有現(xiàn)成的jquery的組建，名字：jquery.lazyload.js 谷歌自己搜吧。
用法：$(function(){
$("img").lazyload({
placeholder : "默認(rèn)等待圖片",
effect : "fadeIn"
});
});