图片延迟加载(兼容IE&FF&Chrome)

最新推荐文章于 2025-08-22 09:14:48 发布

原创最新推荐文章于 2025-08-22 09:14:48 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#图片延迟加载 #IE7下offset问题 #获取Firefox事件

Javascript 专栏收录该内容

55 篇文章

订阅专栏

本文介绍了一种实现图片延迟加载的技术，通过自定义的JS函数lazyload，可以在页面滚动时按需加载图片，提高用户体验。

经常看到京东，团购有图片延迟加载的使用，于是自己捉摸着实现了一个，仅供参考。

js代码部分：

/**
*图片延迟加载
*@param yourfun 处理图片的方法
*@param divID scroll绑定的容器的ID(默认是当期事件触发的控件，然后是document)
*
**/
function lazyload(yourfun,divID,offsetParentId){
	//构造全局变量：lazyImgs，格式为{arr:null,len:null};
	if(typeof(lazyImgs)=="undefined"){
		lazyImgs = {arr:null,len:null};
		lazyImgs.arr = document.getElementsByTagName("IMG");	//获取页面所有图片
		lazyImgs.len = lazyImgs.arr.length;
	}
	//顺序：指定ID的控件，然后是 当前事件触发的控件(先IE后Firefox)，最后是 document
	var dom =document.getElementById(divID+"")||(window.event||{}).srcElement||getFFEvent().target||document.documentElement;
	var nOffsetHeight  = dom.offsetHeight+dom.scrollTop;
	var img;
	var offsetParent = null;
	var IEversion = 0;
	if(document.all){
		IEversion = parseInt((navigator.userAgent.split("MSIE")[1]).split(";")[0].replace(/ /,''));
	}
	var nTop = 0;
	for(var i=0;i<lazyImgs.len;i++){
		img = lazyImgs.arr[i];
		nTop = img.offsetTop;
		if(IEversion==7||IEversion==6){//IE67特殊处理。
			nTop = getIE7ImgOffset(img).offsetTop;
			//nTop = img.offsetParent.offsetParent.offsetParent.offsetTop;
		}
		//TODO +100是为了看到延迟效果,改成+0则会立即显示
		if(nTop+100 < nOffsetHeight){
			yourfun(img);
		}
	}
}

/* 获取FF下当前事件对象 */
function getFFEvent(){
	var func = EasyTip.getFFEvent.caller;
	while (func != null) {
		var arg0 = func.arguments[0];
		if (arg0) {
			if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
			   // top.JSLogger.log(arg0);
				return arg0;
			}
		}
		func = func.caller;
	}
	return func;
}
/*
*目的：IE7和IE6下，如果图片的容器(多半是DIV)的float等于left或者right，那么
*	自身的offsetTop等于相对于其父容器的高度，不是相对于body的高度，IE7、6如下处理。
*用户获取包裹img标签在IE7和IE6下的offset对象
*@param dom 一个dom对象(传递img对象或者其他dom对象)
*@return 从里向外找，返回第一个float为空的dom的父窗体。
***/
function getIE7ImgOffset(dom){
	var sFloat = dom.offsetParent.style["float"]||"";
	var bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase());
	while(bNext && (dom = dom.offsetParent)){
		sFloat = dom.style["float"]||"";
		bNext = ("left"==sFloat.toLowerCase() || "right"==sFloat.toLowerCase());
	}
	return dom;
}
//延迟图片的处理方法：重新加载并显示图片的src
function resetImg(img){
	if(!!img.getAttribute("file")){
		 img.setAttribute("src",img.getAttribute("file"));
		 img.removeAttribute("file");
	}
}

function onload(){
//使用图片LazyLoud
document.getElementById("content").style.height="500px";
   document.getElementById("content").onscroll= function(){
	   lazyload(resetImg,"content","1366content");
	};
}

附件是演示源码

愤怒的coder - 不断进取