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

图片延迟加载

2011年10月18日

图片延迟加载

鉴于之前写的一个图片延迟加载api 在项目中应用起来改动量太大(要把全部应用到图片延迟加载的 src 统一改成 lazy_src要惊动多个部门呢..技术部,运营部等),于是乎就诞生了这个 lazy_onload 的优化版了,无需改动原有代码即可实现图片延迟加载。

工作原理

在 需要应用图片延迟加载的页面最底部运行(不能丢进window.onload里面,因为window.onload是等网页完全加载完成的时候才调用的,当然也包括图片的加载喇…),运行后,给需要图片延迟加载的对象 添加一个 lazy_src 属性,并将 原有的 src 的值 存放进去,而 src 则替换成一张 透明gif图(这是因为,经过测试,chrome,opera,safari当图片设置了带有图片地址的 src地址的时候,再把src地址改为空是不行的,图片继续进行加载 无视你的空值,所以得给个图片他去load而不能直接把src设为空值),然后就是每当触发 window.onscroll 和 window.onresize 的时候 循环检测所有图片,当图片出现在可视区域范围内时,就把 lazy_src 的值 赋值到 src,让图片进行加载。当全部图片都加载完之后,撤掉事件。

演示地址: http://www.jackness.org/lab/object/lazy_onloadV2/demo.html

JS源码

/*
 * lazy_onload(option) 图片延迟加载(将调用函数放在网页底部即可,不能放在 window.onload 里面 否则没效果)
 * option = {
		targets:需要延迟加载的 img 对象 默认 全部插入图片
		distance:距离可视区域多少开始加载 img
		replace_img_url:替代的图片url地址
   }
 * lazy_onload.init():函数执行
 * ----------------------------------------------------------------
 * example:
	lazy_onload({targets:"img",distance:0,replace_img_url:"images/blank.gif"}).init();完整版
	lazy_onload().init();简单版 范围为全体 img图片
 * ----------------------------------------------------------------
 * power by jackNEss
 * date:2011-10-17
 * ver:1.0
 */
var lazy_onload = function(){
	var option = {
		//需要延迟加载的 img 对象
		targets:easy_switch("img"),
		//距离可视区域多少开始加载 img
		distance:0,
		//替代的图片url地址
		replace_img_url:"images/blank.gif"
	}
	
	var _op;
	arguments[0]? _op = arguments[0]:"";
	
	function addEvent(elm,type,func){
		if(elm.attachEvent){
			elm.attachEvent("on" + type,_addEvent);
		}
		else if(elm.addEventListener){
			elm.addEventListener(type,_addEvent,false);
		}
		
		function _addEvent(){
			func.call(elm);
		}
		
		return _addEvent;
	}
	
	function removeEvent(elm,type,func){
		if(elm.detachEvent){
			elm.detachEvent("on" + type,func);
		}
		else if(elm.removeEventListener){
			elm.removeEventListener(type,func,false);
		}
	}
	
	function easy_switch(elm){
		if(typeof elm == "string"){
			var strs = elm.split(" ");
			var targetElements = [document.body];
			for(var i = 0; i < strs.length; i++){
				if(!targetElements){return false;}
				var flagGroups = new Array();
				
				for(var j = 0; j < targetElements.length; j++ ){
					
					var datasource = typeSwitcher(targetElements[j],strs[i]);
					if(!datasource){return false;}
					if(!datasource.length){
						if(datasource){
							flagGroups.push(datasource);
						}
					}
					else{
						
						for(var k = 0; k < datasource.length; k++){
							if(datasource[k]){
								flagGroups.push(datasource[k])
							}
						}	
					}
					
				}
				targetElements = flagGroups;
			}
			if(targetElements.length ==1){return targetElements[0]}
			else {return targetElements;}
		}
		else{
			return elm;	
		}
		function typeSwitcher(elm,str){
			
			if(str.substring(0,1) == "#"){
				return document.getElementById( str.substring(1,str.length) )	
			}
			else if(str.substring(0,1) == "."){
				var flag = elm.getElementsByTagName("*");
				var results = [];
				var classStr = str.substring(1,str.length);
				var classNames;
				for(var i = 0; i < flag.length; i++ ){
					classNames = flag[i].className.split(" ");
					
					for( var j = 0; j < classNames.length; j++ ){
						if( classStr == classNames[j] ){
							results.push(flag[i]);	
						}
					}
				}
				return results;
			}
			else{
				var result = elm.getElementsByTagName(str)	
				if(result.length >0){
					return result;	
				}
				else{
					return false;	
				}
			}
		}
	}
	
	function getCssValue(elm,attribute){
		try{
			return	elm.currentStyle?elm.currentStyle[attribute]:document.defaultView.getComputedStyle(elm,false)[attribute];
		}
		catch(e){
			return false;
		}	
	}
	
	function getElmPosition(elm){
		var contentDocument = document;
		arguments[1]? contentDocument = arguments[1]:"";
		var _x = elm.offsetLeft;
		var _y = elm.offsetTop;
		
		if(getCssValue(elm,"position") == "fixed"){
			
			_x += contentDocument.documentElement.scrollLeft||contentDocument.body.scrollLeft;
			_y += contentDocument.documentElement.scrollTop||contentDocument.body.scrollTop;
			 	
		}
		
		while(elm = elm.offsetParent){
			_x += elm.offsetLeft||0;
			_y += elm.offsetTop||0;
		}
		return{
			x:_x,
			y:_y	
		}	
	}
	
	//区域初始化
	function areaReset(){
		if( typeof option.targets.length == "undefined"){
			
			option.targets = [option.targets];
		}
		for( var i = 0; i < option.targets.length; i++){
			option.targets[i].setAttribute("lazy_src",option.targets[i].src);
			option.targets[i].setAttribute("src", option.replace_img_url);
		}
	}
	
	//延迟加载事件
	function lazyOnloadEvent(){
		var screenHeight,screenTop,screenBottom;
		var cellTop,cellBottom;
		var scrollKey,resizeKey;
		
		scrollKey = addEvent(window,"scroll",_lazyOnloadEvent);
		resizeKey = addEvent(window,"resize",_lazyOnloadEvent);
		_lazyOnloadEvent();
		function _lazyOnloadEvent(){
			
			screenHeight = document.documentElement.clientHeight;
			screenTop = document.documentElement.scrollTop||document.body.scrollTop;
			screenBottom = screenHeight + screenTop;
			for( var i = 0; i < option.targets.length;){
				cellTop = getElmPosition(option.targets[i]).y;
				cellBottom = cellTop + (option.targets[i].offsetHeight||0);
				if(( cellBottom > screenTop - option.distance && cellBottom < screenBottom )||( cellTop < screenBottom + option.distance && cellTop > screenTop )){
					option.targets[i].src = option.targets[i].getAttribute("lazy_src");
					option.targets[i].setAttribute("lazy_src","");
					option.targets.splice(i,1);
				}
				else{
					i++;
				}
			}
			
			if(option.targets.length ==0){
				removeEvent(window,"scroll",scrollKey);
				removeEvent(window,"scroll",resizeKey);
			}
		}
	}
	
	return{
		//属性设置
		setOption:function(op){
			op.targets? option.targets = easy_switch(op.targets):"";
			op.distance? option.distance = parseInt(op.distance):"";
			op.replace_img_url? option.replace_img_url = op.replace_img_url:"";
			return this;
		},
		//执行
		init:function(){
			if(_op){ this.setOption(_op);}
			if( !option.targets){return;}
			areaReset();
			lazyOnloadEvent();
		}
		
	}
	
}	
分类javascript
阅读 1,430
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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