欢迎来到 jackNEss'窝窝
I like simple mind

浅谈图片延迟加载技术

2011年09月10日

浅谈图片延迟加载技术

图片延迟加载技术,顾名思义,就是让图片晚一步地进行加载,从而加快网页的加载速度,这种技术尤其在访问 一些图片较多 或者 页面较长 的页面 如各种商城,效果较为显著。这种技术已在各大团购网站,商城网站之中应用如 淘宝网

工作原理

在第一次加载网页的时候,网页上面的图片先不加载,当你通过滚动条把页面滚动到我们浏览器的可视区域时,当前可视区域的图片才即时加载的,这样页面在浏览的过程中只加载可视区域的图片,而其它飞可视区域的图片则不加载,从而加快了页面加载的速度,对于比较长的页面和一些图片较多的站点来说,这个方案尤其合适。

技术层面分析

通过给予 img 标签的 一个属性(这里使用的是 lazy_src)来储存 src 地址,而 src地址为空,在页面加载时,把所有使用了 lazy_src 的图片都保存到数组里面,等页面完全加载之后,执行方法,通过循环检测可视区域的 scrollTop 值的范围,把对应在这个范围里面的图片的 lazy_src 赋值到 src 里面,让图片进行加载,并将对应的图片对象从数组中去掉,当数组里面的图片全部加载完成的时候,停止循环检测。

代码部分

触发条件: 图片属性必须有 lazy_src 属性并且 src不赋值(如果src赋值了,那就不叫延时加载了)

<img src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="" lazy_src="图片地址" />

下面是javascript代码:

// JavaScript Document

/* lazy_onload() 图片延迟加载,触发条件 图片属性必须有 lazy_src 属性并且 src不赋值(如果src赋值了,那就不叫延时加载了)
 * --------------------------------------------
 * example:
   
   -html部分
   <img lazy_src="temp/sample_img01.jpg"  alt=""/>
   
   -javascript 部分
   lazy_onload().init();
 
 * -------------------------------------------- 
 * power by jackness
 * date:2011-7-21
 * ver 1.1
 */

var lazy_onload = function(){
	
	var _lazyImgs = [];
	
	//获取对象的 top值
	function getElementTop(elm){
		var flag = elm;
		var top = flag.offsetTop;
		while(flag = flag.offsetParent){
			top +=	flag.offsetTop;
		}	
		return top;
	}
	
	//获取延迟加载图片对象
	function getLazyImgs(){
		var imgs = document.getElementsByTagName("img");
		var lazyImgs = [];
		for( var i = 0; i < imgs.length; i ++){
			if( imgs[i].getAttribute("lazy_src") ){
				
				lazyImgs.push(imgs[i]);
					
			}	
		}
		return lazyImgs;	
	}
	
	//延迟加载检测 imgs必须有 lazy_img 属性
	function imgOnLoadCheck(imgs){
		var imgGroup = imgs;
		function imgCheck(){
			if(imgGroup.length<=0){return;}	
			var screenHeight = document.documentElement.clientHeight;
			var screenScrollTop = document.documentElement.scrollTop||document.body.scrollTop;
			for( var i = 0; i < imgGroup.length;){
				if(!imgGroup[i].screenTop){
					imgGroup[i].screenTop =  getElementTop(imgGroup[i]);
				}
				if( getElementTop(imgGroup[i]) >= screenScrollTop && getElementTop(imgGroup[i]) <= screenScrollTop + screenHeight){
					imgGroup[i].src = imgGroup[i].getAttribute("lazy_src");
					imgGroup.splice(i,1);
				}
				else{
					i++;	
				}		
			}
			setTimeout(imgCheck,200)
		}
		imgCheck();	
	}
	
	return{
		//函数执行
		init:function(){
			_lazyImgs = getLazyImgs();	
			
			imgOnLoadCheck(_lazyImgs);
			//alert(getElementTop(_lazyImgs[1]))	
		}	
	}	
}

效果展示地址:http://www.jackness.org/lab/object/lazy_imgloader/demo.html

分类javascript
阅读 1,536
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS