lazyLoad 懶加載 圖片例子

因爲項目與圖片資源服務器分離，而首頁若是全部加載圖片的話會很慢、所以研究了一下懶加載的例子，然後適用到了項目中。

大概的思路就是創建個div 、然後滾動條事件綁定  檢測顯示的頁面div是否在一個高度的條件內、在給圖片的src賦值、 

需要jquery.js      我的版本是1.7.1min

<script src="jquery-1.7.1.min.js"></script>

<style type="text/css">
#lazyLoadImage img{ width:159px; height:71px; border:1px solid #CCCCCC; padding:3px; float:left; margin:10px; visibility:visible;opacity:0.00;filter:alpha(opacity=00);-moz-opacity:0.0;}
</style>

filter:alpha(opacity=00);是 ie的、

-moz-opacity:0.0; 是ff的、

<script>
function imgLazyLoad(){//掃描需要加載的div
	$.each($("#lazyLoadImage img"),function(i,o){		
		//獲取窗口高		
		var windowHeight=$(window).height();
		//獲取滾動條
		var scrollTop=$(document).scrollTop();
		windowHeight=windowHeight; //可以設置滾動條在顯示某個高度來lazyload   windowHeight=windowHeight/2; 比如在顯示屏幕高度2分之1的時候加載
		
		
		//先判斷是否是加載完的圖片 跳出
		if($(o).attr("src")==$(o).attr("pic")){
			return true;
		}else if( $(o).offset().top<=(scrollTop+windowHeight)  && $(o).offset().top >= scrollTop ){//判斷div是不是出在可見的位置
			if($(o).attr("pic") != undefined || $(o).attr("pic") != "undefined" ){
				var ObjectSrc = $(o).attr("pic");
				//把pic的值賦給src值
				$(o).attr("src",ObjectSrc);
				//css屬性改爲可見
				$(o).css("visibility","visible");
				//漸變時間和漸變值
				$(o).fadeTo(1000,1.00);
			}
		}				
	});	
}
$(function(){//頁面第一次加載時
	imgLazyLoad();//初始化
	//判斷瀏覽器
	if($.browser.msie){
		//IE瀏覽器
		$(window).scroll(imgLazyLoad);//瀏覽器的兼容
	}else {
		//其他瀏覽器 ff chrome 測試通過
		$(document).scroll(imgLazyLoad);//當滾動條滾動時,掃描需要加載的div
	}
	
	//$("body").scroll(imgLazyLoad);//瀏覽器的兼容   不清楚是哪款瀏覽器
});
</script>




<div id="lazyLoadImage">
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
<img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
...請批量複製多個圖片
<div>