首页 > javascript > 代码分享之图片延迟载入

代码分享之图片延迟载入

2010年8月10日 effect 发表评论 阅读评论

对于图片很多，而且很长的页面，也许第三屏后面的很少有用户滚动下去查看。如果图片也照样载入的话，是不是觉得有点浪费带宽，也浪费图片服务器的连接数。这个时候延迟载入很重要，按需载入。PV越大的效果越明显，废话少说，先看代码：

var LAZY=(function(){
	var pResizeTimer = null;
	var imgs={};
	function addEventHandler (oTarget, sEventType, fnHandler) {
		if (oTarget.addEventListener) {
			oTarget.addEventListener(sEventType, fnHandler, false);
		} else if (oTarget.attachEvent) {
			oTarget.attachEvent("on" + sEventType, fnHandler);
		} else {
			oTarget["on" + sEventType] = fnHandler;
		}
	};
	function resize(){
		if(pResizeTimer) return '';
		pResizeTimer = setTimeout(function(){
							resize_run();
							try{
								clearTimeout(pResizeTimer);
							}
							catch(e){}
							pResizeTimer=null;
						}, 100);
	}
	function resize_run(){
		var min={};
		var max={};
        min.Top = document.body.scrollTop + document.documentElement.scrollTop;
		min.Left=document.documentElement.scrollLeft;
		max.Top=min.Top+document.documentElement.clientHeight;
		max.Left=min.Left+document.documentElement.clientWidth;
 
		for(var i in imgs){
			if(imgs[i]){
				var _img=imgs[i];
				var img=document.getElementById(i);
				var width = img.clientWidth;
				var height = img.clientHeight;
				var wh=position(img);
				if(
					(wh.Top>=min.Top && wh.Top<=max.Top)
					||
					((wh.Top+height)>=min.Top && wh.Top<=max.Top)
				)
				{
					img.src=_img.src;
					delete imgs[i];
				}
 
			}
		}
	}
 
	function position(o){
		var p={Top:0,Left:0};
		while(!!o){
			p.Top+=o.offsetTop;
			p.Left+=o.offsetLeft;
			o=o.offsetParent;
		}
		return p;
	}
 
	return {
		init:function(){
			for(var i=0;i<document.images.length;i++){
				var img = document.images[i];
				var config={};
				config.id = img.id;
				config.src = img.getAttribute('_src');
				if(config.src && !config.id){
					config.id = encodeURIComponent(config.src) + Math.random();
					img.id = config.id;
				}
				if(!config.id || !config.src) continue;
				LAZY.push(config);
			}
			return LAZY;
		},
		push:function(config){
			imgs[config.id] = config;
		},
		run:function(){
			resize_run();
			addEventHandler(window,'scroll',resize);
		}
	};
})();

使用方法很简单，2个步骤：
1 img的标签的src属性指向一个空地址，或者一个1×1的空白图片，_src属性指向实际图片地址，如：

<img src="" _src="path/to/img.jpg" />

2 在页面底部或者body onload里面：

LAZY.init().run();

在公司千万级的PV项目上使用了，据说效果不错喔!

分类: javascript 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.
watch bleach online avatar the last airbender ncis episodes