浏览器可视范畴图片加载

浏览器可视范围图片加载

图片懒加载技术今用得相当广泛，如淘宝、迅雷等大型海量图片网站都运用了此js技术，

所谓img lazyload，简而言之则为浏览器可视范围图片加载，也就是浏览至哪张图片此时才会

发请求至服务器加载，这样在很大程度上提升了网站访问性能。

jquery的lazyload组建实现了此功能，如下是本人写的一简易版，愿与大家分享！

lazyload.js内容为：

function lazyLoadImg(){
		imgs = document.getElementsByTagName("img");
		
		addOnscroll();
	}
    
	//滚动条事件
	function addOnscroll(){
		runload();
		
		window.onscroll = function (){
			runload();
		}
	}
    
	//可视范围加载
    function runload(){
    	  for(var i=0; i<imgs.length; i++){
			   var isload = imgs[i].getAttribute("isload");
			   var point = getXY(imgs[i])
			   var clientY = document.documentElement.clientHeight;
			   var clientX = document.documentElement.clientWidth;
			   var imgclientY = point.y-(document.documentElement.scrollTop);
			   var imgclientX = point.x-(document.documentElement.scrollLeft);

              
			   if(isload != "true" && imgclientY < clientY && imgclientX < clientX){
				   imgs[i].src = imgs[i].getAttribute("_src");	
				   imgs[i].setAttribute("isload", "true");
			   }		
    	 }
    }
	
	//获取目标决定坐标
	function getXY(aBox){
		var tp=aBox.offsetTop;
		var lft=aBox.offsetLeft;

		do {
			aBox = aBox.offsetParent;
			lft += aBox.offsetLeft;
			tp += aBox.offsetTop;
			} while( aBox.tagName != "BODY" );

		return {"x":lft, "y":tp};
	}
    

  
	//初始化
	window.onload = function (){
		lazyLoadImg();
	}

页面只需在img标签中添加_src（值为图片路径，原有的src设置成默认加载图片）,最后导入js即可

浏览器可视范畴图片加载

相关推荐