JS网站图片延迟加载

 这个兼容性不怎么好

lazyLoad = (function () {
	var map_element = {};
	var element_obj = [];
	var download_count = 0;
	var last_offset = -1;
	var doc_body;
	var doc_element;
	var lazy_load_tag;
	var jj = 0;
	var kk = 0;
	
	function initVar(tags) {
		doc_body = document.body;
		//判断是否为IE的"怪异模式"
		//doc_element = document.compatMode == 'BackCompat' ? doc_body : document.documentElement;
		doc_element = (document.compatMode && document.compatMode != "CSS1Compat") ? doc_body : document.documentElement;
		lazy_load_tag = tags || ["img", "iframe"];
	};
	function initElementMap() {
		//var all_element = [];
		//从所有相关元素中找出需要延时加载的元素  
		for (var i = 0, len = lazy_load_tag.length; i < len; i++) {
			var el = document.getElementsByTagName(lazy_load_tag[i]);
			for (var j = 0, len2 = el.length; j < len2; j++) {
                        //yc为要替换的图片地址
    				if (typeof (el[j]) == "object" && el[j].getAttribute("yc")) {
					element_obj.push(el[j]);
				}
			}
		}
		for (var i = 0, len = element_obj.length; i < len; i++) {
			var o_img = element_obj[i];
			var t_index = getAbsoluteTop(o_img); //得到图片相对document的距上距离  
			if (map_element[t_index]) {
				map_element[t_index].push(i);
			} else {
				//按距上距离保存一个队列  
				var t_array = [];
				t_array[0] = i;
				map_element[t_index] = t_array;
				download_count++; //需要延时加载的图片数量  
			}
		}
	};
	function initDownloadListen() {
		if (!download_count) return;
		var loadxz = '';
		//var offset = (window.MessageEvent && !document.getBoxObjectFor) ? doc_body.scrollTop : doc_element.scrollTop;
		/*if(document.compatMode && document.compatMode == "CSS1Compat"){
			loadxz = 1;
		}*/
		if(window.MessageEvent && !document.getBoxObjectFor){
			if(window.attachEvent){
				loadxz = 2;
			}else{
				loadxz = 1;
			}
		}
		var offset = (loadxz == 1) ? doc_body.scrollTop : doc_element.scrollTop;
		//可视化区域的高=offtset+document的高  
		var visio_offset = offset + doc_element.clientHeight;
		if (last_offset == visio_offset) {
			setTimeout(initDownloadListen, 200);//每隔0.2秒检测一次，这玩意儿感觉有些耗资源的
			return;
		}
		last_offset = visio_offset;
		var visio_height = doc_element.clientHeight;
		var img_show_height = visio_height + offset;
		for (var key in map_element) {
			if (img_show_height > key) {
				var t_o = map_element[key];
				var img_vl = t_o.length;
				for (var l = 0; l < img_vl; l++) {
					element_obj[t_o[l]].src = element_obj[t_o[l]].getAttribute("yc");
				}
				delete map_element[key];
				download_count--;
			}
		}
		setTimeout(initDownloadListen, 200);
	};
	function getAbsoluteTop(element) {
		if (arguments.length != 1 || element == null) {
			return null;
		}
		var offsetTop = element.offsetTop;
		while (element = element.offsetParent) {
			offsetTop += element.offsetTop;
		}
		return offsetTop;
	}
	function init(tags) {
		initVar(tags);
		initElementMap();
		initDownloadListen();
	};
	return {
		init: init
	}
})();

调用代码：

<script type="text/javascript">
lazyLoad.init();
</script>

这个还行：

/*延时加载*/
function delayload(option){
 //读取参数
 //图片未加载时显示的图片
 var src = option.src ? option.src: '',
 //指定那些id下的img元素使用延迟显示
 id = option.id ? option.id: [];
 //图片列表
 var imgs = [];
 //获得所有的图片元素
 for(var i = 0; i < id.length; i++){
  var idbox = document.getElementById(id[i]),_imgs;
  if (idbox && (_imgs = idbox.getElementsByTagName('img'))){
   for (var t = 0; t < _imgs.length; t++) {
    imgs.push(_imgs[t]);
   }
  }
 }
 //将所有的图片设置为指定的loading图片
 /*for(var i=0 ; i < imgs.length ; i++){
  //图片本来的图片路径放入_src中
  imgs[i].setAttribute('_src',imgs[i].src);
  imgs[i].src = src;
 }*/
 //取元素的页面绝对 X位置
 var getLeft = function(El){
  var left = 0;
  do{
   left += El.offsetLeft;
  }while((El = El.offsetParent ));
  return left;
 };
 //取元素的页面绝对 Y位置
 var getTop = function(El) {
  var top = 0;
  do{
   top += El.offsetTop;
  }while((El = El.offsetParent));
  return top;
 };
 //是否为ie，并读出ie版本
 var isIE = !!navigator.userAgent.match(/MSIE\b\s*([0-9]\.[0-9]);/img);
 isIE && (isIE = RegExp.$1);
 //是否为chrome
 var isGoo = !!navigator.userAgent.match(/AppleWebKit\b/img);
 //获得可以触发scroll事件的对象
 var box = isIE ? document.documentElement: document;
 //body元素的scroll事件
 var onscroll = box.onscroll = function(){
  //读取滚动条的位置和浏览器窗口的显示大小
  var top = isGoo ? document.body.scrollTop: document.documentElement.scrollTop,
  left = isGoo ? document.body.scrollLeft: document.documentElement.scrollLeft,
  width = document.documentElement.clientWidth,
  height = document.documentElement.clientHeight;
  //对所有图片进行批量判断是否在浏览器显示区域内
  for(var i = 0; i < imgs.length; i++){
   var _top = getTop(imgs[i]),
   _left = getLeft(imgs[i]);
   //判断图片是否在显示区域内
   if(_top >= top && _left >= left && _top <= top + height && _left <= left + width){
   //yc为要替换的图片地址
    var _src = imgs[i].getAttribute('yc');
    //如果图片已经显示，则取消赋值
    if(imgs[i].src !== _src){
     imgs[i].src = _src;
    }
   }
  }
 };
 
 var load = new Image();
 load.src = src;
 load.onload = function(){
  onscroll();
 };
}

调用代码：

delayload({id:['dginhrml'],src:'img/loading.gif'});