當滾動條條滾動到圖片位置再顯示圖片，像淘寶，京東等網站都采用了這樣的js技術，這樣可以是帶寬使用減少，也可以增加用戶體驗。
下面將滾動條到圖片才能顯示圖片的構思說一下:
即:當滾動條滾動時出發檢查事件,檢查每一個圖片位置，當圖片距離頁面頂部位置小于滾動條加上瀏覽器高度時，則圖片進行顯示輸出
jquery代碼如下
首先將圖片，設置一個value屬性，讓其為真實圖片位置值，設置另一個src為一個小圖片為等待圖片。當圖片達到圖片位置時，將value值賦給src即可。
$(function(){
$(window).scroll( function() {
$("img").each(function(i){
if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){
$(this).attr("src",$(this).attr("value"));
}
});
});
});
解釋一下上面的代碼，本代碼采用jquery弄的， offset().top是獲取圖片距離頂部高度當小于滾動條滾動距離document.documentElement.scrollTop加上瀏覽器高度$(window).height()時則進行顯示，在這里-200是為了看效果，當圖片出來200像素的 時候才進行圖片顯示
網上采用了jquery的jquery.lazyload.js公開組件，代碼如下：
$(function(){
$("img").lazyload({
placeholder : "默認等待圖片",
effect : "fadeIn"
});
});
采用的jquery的組件：下載lazyload.js
<script language="javascript" src="jquery.lazyload.js"></script>
這就是當滾動條到圖片處才顯示圖片的代碼。
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
